transition也可实现动画。transition强调过渡,是元素的一个或多个属性发生变化时产生的过渡效果,同一个元素通过两个不同的途径获取样式,而第二个途径当某种改变发生(如hover)时才能获取样式,这样就会产生过渡动画。
<pre t="code" l="html"><!DOCTYPE html><html>
<head>
<style>
div
{
width:100px
height:100px
background:red
position:absolute
animation:myfirst 5s
-webkit-animation:myfirst 5s
animation-fill-mode: forwards
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:redleft:500pxbottom:50px}
25% {background:redleft:500pxheight:130pxbottom:50px}
50% {background:redleft:500pxheight:160pxbottom:50px}
75% {background:redleft:500pxheight:190pxbottom:50px}
100% {background:redleft:500pxheight:210pxbottom:50px}
}
</style>
</head>
<body>
<div></div>
</body>
</html>这只是个演示的demo,方法就是这样,animation-fill-mode: forwards这一句给你解释下,这句就是当动画完成时,动画会停留在最后一帧。其他代码都比较简单,不懂随时问我。
希望能够帮助到你,!
<div></div>
css部分:
div
{
width:100px
height:100px
background:red
position:relative
animation: mymove 5s infinite /*5s动画持续的时间,infinite播放次数循环,如果只运动一次,则不需要加*/
-webkit-animation: mymove 5s infinite/*Safari and Chrome*/
}
@keyframes mymove /*mymove 为动画的名称*/
{
from {left:0px} /*起点*/
to {left:200px} /*终点*/
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px}
to {left:200px}
}
</style>