Menu
<html>
<head>
<title>Animation</title>
<style type="text/css">
.container
{
background-color: blue;
height: 200px;
width: 200px;
position: relative;
-webkit-animation-name:animate;
-webkit-animation-duration:1s;
}
@-webkit-keyframes animate
{
0%
{
-webkit-transform: translate(0, 0);
}
100%
{
-webkit-transform: translate(100px, 100px);
}
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
The above code animates an object,but after the animation it returns to original position.How to retain it in the new position? which means the square must not return to (0,0)
322
You can use the animation-fill-mode property.
The animation-fill-mode property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay).
By default, CSS animations do not affect the element until the first keyframe is "played", and then stops once the last keyframe has completed. The animation-fill-mode property can override this behavior.
-CSS3 animation-fill-mode Property
-webkit-animation-fill-mode: forwards make the movement permanent, once the animation has run its course.
.container {
background-color: blue;
height: 200px;
width: 200px;
position: relative;
-webkit-animation-name: animate;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes animate {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(100px, 100px);
}
}<div class="container">
</div>Now it will stay at the last frame. I have added the -webkit-transform: translate(100px,100px); to the container class.
.container
{
background-color: blue;
height: 200px;
width: 200px;
position: relative;
-webkit-animation-name:animate;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count: 1;
-webkit-transform: translate(100px,100px);
}
@-webkit-keyframes animate
{
0%
{
-webkit-transform: translate(0, 0);
}
100%
{
-webkit-transform: translate(100px, 100px);
}
}
http://jsbin.com/nimuniviqa/2/
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
