2

试过这个但不工作。我怎样才能动画它？

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

2 回答 2

2

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

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

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

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

于 2013-08-19T12:37:28.183 回答
1

只需在您的 .Animate1 类 css 中进行如下更改：

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

您还可以根据您的要求将位置用作相对位置或固定位置。

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

于 2013-08-19T12:44:13.420 回答