Currently, I am working on creating an animation that gives the illusion of a div sinking backward and then being pushed to the left once it has finished falling back.
Although I am using CSS3 for this project, I am not very familiar with the animation property and have encountered some difficulties. The code I currently have is:
@-webkit-keyframes sinkBack
{
50% {
-webkit-transform: scale(.9);
margin-left: 0;
}
100% {
margin-left: -100px;
}
}
The issue with this code is that it scales down, then starts scaling back up at 50% while moving to the left. My intention was for it to remain at scale(.9) while moving left.
I have also considered using jQuery for this task, but the animate function does not support transform. I prefer not to use plugins for these animations, so CSS3 seemed like the better choice.
EDIT
I want to thank gion for his assistance. Below is the final code after making changes (replacing margin-left):
@-webkit-keyframes sinkBack /* Safari and Chrome */
{
50% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: translateX(-100px) scale(.9);
}
}