<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)
Aucun commentaire:
Enregistrer un commentaire