如何为png图像制作动画答案

【问题标题】：How to animate png image如何为png图像制作动画
【发布时间】：2013-08-21 06:09:24
【问题描述】：

试过了，但没有用。我怎样才能为它制作动画？

    <!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,right,bottom 属性，您必须设置 position 属性 absolute,relative 或 fixed

标签： css animation css-transitions keyframe

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

要使用 top,left,right,bottom 属性，您必须将 position 属性设置为 absolute,relative 或 fixed

【讨论】：