CSS Helix in Z Direction animation effect
CSS Helix in Z Direction animation
To create the moving helical CSS effect we adapt the spinner animation, and adjust it with transform#scale css property.
<style>
.helix-in-z-direction {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: helix-in-z-direction;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes helix-in-z-direction {
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); }
}
</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