Clip-in CSS animation

Can use for the word animations that cut up

@keyframes clipIn{
0%{
opacity:0;
transform: translate3d(0, 20px, 0);
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
100% {
opacity:1;visibility:visible;
transform: translate3d(0, 0, 0);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}

Let me know what you think on twitter @rdallaire

← Return to blog