CSS Curve Erratic animation effect
CSS Curve Erratic animation
Propel an HTML element in a erratic curve motion into Z-direction using CSS tranform functions transform#scale and transform#translate. Similar to curve-up.
<style>
.curve-erratic {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: curve-erratic;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes curve-erratic {
0% { transform: scale(1,1) translate(0%, 0%); }
5% { transform: scale(0.8, 0.8) translate(60%, 50%); }
15% { transform: scale(0.8, 0.8) translate(30%, 60%); }
40% { transform: scale(0, 0) translate(-250%, 250%); }
70% { transform: scale(0, 0) translate(250%, 250%); }
85% { transform: scale(0.8, 0.8) translate(60%, 50%); }
95% { transform: scale(0.8, 0.8) translate(30%, 60%); }
100% { transform: scale(1, 1) translate(0%, 0%); }
}
</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