CSS Light Speed animation effect
CSS Light Speed animation
Propel an HTML element with light speed to the right using a combination of the CSS tranform functions transform#translate and transform#scale, and the CSS property opacity. See light-speed-z for light speed in Z-direction.
<style>
.light-speed {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: light-speed;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.5,1,1,1);
}
@keyframes light-speed {
/* Light speed jump. */
0% { transform: translate(-10px, 0); }
5% { transform: scale(0.9, 1) translate(-25px, 0); }
5.5% { transform: scale(1, .5) translate(-0px, 0); }
25% { transform: scale(25, .1) translate(80px, 0); }
30% { opacity(0); }
50.4% { transform: scale(100, 0) translate(100px, 0); }
50.5% { opacity: 0; transform: translate(-160px, 0);}
/* Light speed slow down. */
60% { opacity: 0; transform: scale(2, 0) translate(-40px, 0);}
60.1% { opacity: .5; transform: scale(2, 1) translate(-21px, 0);}
60.4% { opacity: .5; }
60.5% { opacity: 1; transform: scale(4, 1) translate(-20px, 0);}
61.5% { opacity: 1; transform: scale(1, 1) translate(-10px, 0);}
100% { transform: scale(1, 1) translate(0px, 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