CSS Snake animation effect

CSS Snake animation

Snake-like CSS animation effect using the CSS property transform with the transform functions transform#scale and transform#translate to achieve this effect.

<style> .snake { /* Uncomment as needed. */ /* width: 100px; */ /* height: 100px; */ /* background-color: deeppink; */ animation-name: snake; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes snake { 0% { transform: scale(0.1) translate(200%, 0); } 5% { transform: scale(0.1) translate(-100%, 10%); } 10% { transform: scale(0.15) translate(-180%, 20%); } 20% { transform: scale(0.2) translate(150%, 25%); } 25% { transform: scale(0.3) translate(-120%, 30%); } 30% { transform: scale(0.35) translate(100%, 35%); } 40% { transform: scale(0.5) translate(-50%, 50%); } 50% { transform: scale(1) translate(0, 50%); } 60% { transform: scale(0.5) translate(50%, 40%); } 70% { transform: scale(0.35) translate(-120%, 35%); } 75% { transform: scale(0.2) translate(150%, 30%); } 85% { transform: scale(0.15) translate(-180%, 25%); } 95% { transform: scale(0.1) translate(100%, 10%); } 100% { transform: scale(0.1) translate(200%, 0%); } } </style>
    Hints:
  • 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