CSS Crawl animation effect
CSS Crawl animation
Crawling animation effect for an HTML element using the CSS properties transform#translate and tranform functions transform#rotate .
<style>
.crawl {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: crawl;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes crawl {
/*0% { transform: rotate(5); }*/
12.5% { transform: translate(10%, 0) rotate(-15deg); }
25% { transform: translate(15%, 0) rotate(5deg); }
37.5% { transform: translate(25%, 0) rotate(-15deg); }
50% { transform: translate(30%, 0) rotate(5deg); }
62.5% { transform: translate(40%, 0) rotate(-15deg); }
75% { transform: translate(45%, 0) rotate(5deg); }
100% { transform: translate(55%, 0) rotate(-15deg); }
}
</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