CSS Blinds Left to Right animation effect
CSS Blinds Left to Right animation
Pure CSS window blinds animation from left to right using the CSS properties transform#translateX and transform#scaleX to achieve this effect. Check out our simple top to bottom blinds CSS animation effect.
<style>
.blinds-left-to-right {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: blinds-left-to-right;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes blinds-left-to-right {
0% { transform: translateX(-50%) scaleX(0.01); }
50% { transform: translateX(-10%) scaleX(.7); }
70% { transform: translateX(5%) scaleX(1); }
100% { transform: translateX(5%) scaleX(1); }
}
</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