CSS Pinball animation effect
CSS Pinball animation
Pinball-like CSS animation effect using the CSS property transform with the transform functions transform#scale and transform#translate to achieve this effect.
<style>
.pinball {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: pinball;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes pinball {
0% { transform: scale(0.1) translate(300%, 0); }
5% { transform: scale(0.1) translate(-300%, 10%); }
10% { transform: scale(0.15) translate(-180%, 20%); }
20% { transform: scale(0.2) translate(250%, 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, 100%); }
55% { transform: scale(0.1) translate(-250%, 40%); }
70% { transform: scale(0.2) translate(-10%, 35%); }
75% { transform: scale(0.3) translate(150%, 30%); }
85% { transform: scale(0.3) translate(-180%, 25%); }
95% { transform: scale(0.5) translate(200%, 10%); }
100% { transform: scale(0.1) translate(400%, 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