Vote count:
0
I want to make an image go from poitn a to point b. I can animate the blur, and scale smoothly but the position is not working. It doesn't flow as it should. I have tried it with translatex and translate y and it doesn't seem to respond. Can someone please give me a hand. Here is my code.
body {overflow:hidden;
margin: 0;}
#bird {position: relative;
-webkit-animation: birdfly 5s linear infinite;
animation: birdfly 5s linear infinite;
}
@-webkit-keyframes birdfly {
0% {
-webkit-filter: blur(15px);
-webkit-transform: scale(0.7, 0.7);
left:110px; top:200px;
}
}
100% {
-webkit-filter: blur(0px);
-webkit-transform: scale(1.8, 1.8);
left:400px; top:600px;
}
}
@keyframes birdfly {
0% {
-webkit-filter: blur(15px);
-webkit-transform: scale(0.7, 0.7);
left:110px; top:200px;
}
}
100% {
-webkit-filter: blur(0px);
-webkit-transform: scale(1.8, 1.8);
left:400px; top:600px;
}
}
<html>
<head>
<title>Animated image</title>
<meta charset="utf-8">
</head>
<body>
<div id="bird">
<img src="http://ift.tt/1EAQo1g">
</div>
</body>
</html>
asked 38 secs ago
How can one animate position using CSS -webkit-animation
Aucun commentaire:
Enregistrer un commentaire