使用@keyframes创建动画 @keyframes理解为帧 和 animation 配合使用
使用百分比来规定变化发生的事件,也可以使用from和to关键词,但为了兼容建议百分比
0%动画的开始 100%动画结束
animation:animation-name(必须) animation-duration(必须) animation-timing-function animation-delay animation-iteration-count animation-direction
animation-name 就是绑定的keyframes
animation-duration 动画运行事件 默认是0 0表示不播放动画
animation-timing-function 动画运行的速度曲线 默认ease(动画以低速开始,然后加快,在结束前变慢) 也可以是linear(动画从头到尾的速度是相同的) ease-in(动画低速开始) ease-out(动画低速结束)
animation-delay 动画开始之前的延迟
animation-iteration-count 动画播放的次数,可以是1,2,3,4……也可以是infinite(无限循环)
animation-direction 是否反向播放动画 如果是alternate 则动画会在奇数次数(1,3,5,7,9……)正常播放,在偶数次数后退 但是如果播放次数只是1次,那这个属性设不设没意义
比如下面这个例子,正方形红色,走口字形
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s infinite; /* Opera */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
但是animation有两个属性不能简写在里面,要单独设置
animation-play-state 设置动画是暂停还是播放 默认running paused暂停 running播放
animation-fill-mode 设置动画在播放前或播放后,其动画效果是否可见 动画完成后,动画的状态会回到初始状态。要改变这一点,用animation-fill-mode:forwards 使动画完成后停留在最后一帧