Question

试过这个但不行。我该如何为它制作动画？

    <!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>

Answer 1

您使用top/left/bottom/right属性而未定位<img> - 您需要将其放置在.Animate1选择器中。我在下面的小提琴中添加了绝对定位：

http://jsfiddle.net/FZhJ9/1/

您还可以使用具有相同目的的translateX()/translateY()函数（如果您不想定位<img>）

http://jsfiddle.net/FZhJ9/2/

Answer 2

只需在.Animate1 Class css中更改如下：

.Animate1 {
   animation:mymove 5s 2;
   -webkit-animation:mymove 5s 2; /* Safari and Chrome */
    position:absolute;
}

您也可以根据您的要求使用职位作为亲戚或固定职位。

要使用 top，left，right，bottom 属性，您必须将位置属性设置为绝对，相对或固定

如何动画png图像

2 个答案: