Css 如何设置png图像的动画_Css_Animation_Css Transitions_Keyframe

Css 如何设置png图像的动画

css animation

Css 如何设置png图像的动画,css,animation,css-transitions,keyframe,Css,Animation,Css Transitions,Keyframe,我试过了，但没用。我该如何设置动画 <!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}

我试过了，但没用。我该如何设置动画

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


.动画1{
动画：mymove 5s2；
-webkit动画：mymove 5s 2；/*Safari和Chrome*/
}
@关键帧mymove
{
0%{top:0px；}
25%{顶部：200px；}
75%{顶部：50px}
100%{top:100px；}
}
@-webkit关键帧mymove/*Safari和Chrome*/
{
0%{top:0px；}
25%{顶部：200px；}
75%{顶部：50px}
100%{top:100px；}
}

您使用的是

上/左/下/右

属性，而没有定位

-您需要将其定位在

.Animate1

选择器中。我在下面的提琴中添加了绝对定位：

您还可以使用具有相同用途的

translateX（）/translateY（）

函数（如果您不想定位

）

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

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

根据您的要求，您还可以使用相对位置或固定位置

要使用顶部、左侧、右侧、底部属性，必须设置位置属性绝对、相对或固定

要使用顶部、左侧、右侧、底部属性，必须设置位置属性绝对、相对或固定