anicollection
Version:
AniCollection, The easiest way to find, use and share CSS3 animations.
38 lines (36 loc) • 808 B
CSS
/*
*@name flipInX
*@className flipInX animated
*@cssCode true
*@editionLink codepen.io
*@author Dan Eden
*@source Animate.css
*@sourceUrl http://daneden.github.io/animate.css/
*@issues https://github.com/daneden/animate.css/issues
*@license MIT
*/
@keyframes flipInX {
0% {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transition-timing-function: ease-in;
opacity: 0
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transition-timing-function: ease-in
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
}
100% {
transform: perspective(400px)
}
}
.flipInX {
backface-visibility: visible;
animation-name: flipInX
}