CSS Teeter animation effect
CSS Teeter animation
Let a HTML element teeter by using the CSS property transform#scale.and transform#translate .
<style>
.teeter {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: teeter;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes teeter {
/* 0% { } */
33% { transform: translate(-7%, 0) rotate(-9deg); }
66% { transform: translate(-5%, 0) rotate(4deg); }
66% { transform: translate(7%, 0) rotate(9deg); }
}
</style>
- If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
- Remove the HTML style tag as needed.
- Change values in the code such as animation-duration as needed.
Animation effects source code licenced under
MIT Licence