尝试过这个但不起作用。我怎样才能让它动起来？
<!DOCTYPE html>
<html>
<head>
<style>
.Animate1 {
animation:mymove 5s 2;
-webkit-animation:mymove 5s 2; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
</style>
</head>
<body>
<img class="Animate1" src="http://static.monstermmorpg.com/images/monsters-images-240-240/72-Wogare.png"/>
</body>
</html>
最佳答案
您正在使用top/left/bottom/right属性，而无需定位 <img> - 您需要将其放置在 .Animate1 内选择器。我在下面的 fiddle 中添加了绝对定位:
您还可以使用translateX()/translateY()具有相同目的的函数(如果您不想定位 <img> )
关于css - 如何为 png 图像制作动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18313913/