I'm currently working on an animation using CSS keyframes. Here is what I have:
@keyframes experience {
0% {
-webkit-transform: scale(0,0);
transform: scale(0,0);
-webkit-transform: translateY(40px);
transform: translateY(40px);
opacity: 1;
}
60% {
-webkit-transform: scale(1,1);
transform: scale(1,1);
-webkit-transform: translateY(40px);
transform: translateY(40px);
opacity: 1;
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
}
}
Everything seems to be working fine except for the Scale property, as it scales in one go rather than animating smoothly. I am also using the Jquery waypoints plugin and the div has a specific class applied to it.
.workitem {
position: relative;
width: 1000px;
height: 200px;
background-color: #333;
margin: 0 auto;
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
When the waypoint triggers, I add another class which utilizes the above animation.
.experience {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: experience 2s ease-in forwards ;
animation: experience 2s ease-in forwards ;
}
This class applies the specified animation mentioned earlier.