如何为png图像制作动画
Posted
技术标签:
【中文标题】如何为png图像制作动画【英文标题】：How to animate png image 【发布时间】：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 【参考方案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
【讨论】：
以上是关于如何为png图像制作动画的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Apple WatchKit 中为循环进度设置动画？
如何为我的 GIF tilesheet 制作动画（OpenGL、DevIL、C++）