CSS Spiral animation effect

CSS Spiral animation

Simple spiral CSS animation effect in Z-direction by applying the CSS property transform and its functions tranform#scale and transform#translate.

<style> .spiral { /* Uncomment as needed. */ /* width: 100px; */ /* height: 100px; */ /* background-color: deeppink; */ animation-name: spiral; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spiral { 0% { transform: translate(0, -50%); } 6.25% { transform: translate(19%, -46%) scale(0.9375, 0.9375); } 12.5% { transform: translate(35.35%, -35.35%) scale(0.875, 0.875); } 18.25% { transform: translate(46%, -19%) scale(0.8125, 0.8125); } 25% { transform: translate(50%, 0) scale(0.75, 0.75); } 31.25% { transform: translate(46%, 19%) scale(0.6875, 0.6875); } 37.5% { transform: translate(35.35%, 35.35) scale(0.625 , 0.625); } 43.75% { transform: translate(19%, 46%) scale(0.5625 , 0.5625); } 50% { transform: translate(0, 50%) scale(0.5 , 0.5); } 56.25% { transform: translate(-19%, 46%) scale(0.4375 , 0.4375); } 62.5% { transform: translate(-35.35, 35.35%) scale(0.375 , 0.375); } 68.75% { transform: translate(-46%, 19%) scale(0.3125 , 0.3125); } 75% { transform: translate(-50%, 0) scale(0.25 , 0.25); } 81.25% { transform: translate(-46%, -19%) scale(0.1875 , 0.1875); } 87.5% { transform: translate(-35.35%, -35.35%) scale(0.125 , 0.125); } 93.75% { transform: translate(-19%, -46%) scale(0.0625 , 0.0625); } 100% { transform: translate(0, -50%) scale(0.0625 , 0.0625); } /*105% { transform: translate(0, -50%-10%); scale(0.0625, 0.0625)} 106.25% { transform: translate(19%-10, -46%-10) scale(0.09375, 0. 09375); }*/ /* 12.5% { transform: translate(35.35%, -35.35%) scale(0.875, 0.875); } 18.25% { transform: translate(46%, -19%) scale(0.8125, 0.8125); } 25% { transform: translate(50%, 0) scale(0.75, 0.75); } 31.25% { transform: translate(46%, 19%) scale(0.6875, 0.6875); } 37.5% { transform: translate(35.35%, 35.35) scale(0.625 , 0.625); } 43.75% { transform: translate(19%, 46%) scale(0.5625 , 0.5625); } 50% { transform: translate(0, 50%) scale(0.5 , 0.5); }*/ } </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