html5 动画运动 属性

属性    描述    CSS
@keyframes    规定动画。    3
animation    所有动画属性的简写属性,除了 animation-play-state 属性。    3
animation-name    规定 @keyframes 动画的名称。    3
animation-duration    规定动画完成一个周期所花费的秒或毫秒。默认是 0。    3
animation-timing-function    规定动画的速度曲线。默认是 "ease"。    3
animation-delay    规定动画何时开始。默认是 0。    3
animation-iteration-count    规定动画被播放的次数。默认是 1。    3
animation-direction    规定动画是否在下一周期逆向地播放。默认是 "normal"。    3
animation-play-state    规定动画是否正在运行或暂停。默认是 "running"。    3
animation-fill-mode    规定对象动画时间之外的状态。    3
下面的两个例子设置了所有动画属性:
animation:myfirst 5s linear 2s infinite alternate;
1.animation-name 动画的名称 、
2.animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

3.animation-timing-function 规定动画的速度曲线。默认是 "ease"。
 
  
4.animation-delay    规定动画何时开始。默认是 0。

5.animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。

复杂的写法: div { width:100px; height:100px; background:red; position:relative; animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Firefox: */ -moz-animation-name:myfirst; -moz-animation-duration:5s; -moz-animation-timing-function:linear; -moz-animation-delay:2s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; /* Opera: */ -o-animation-name:myfirst; -o-animation-duration:5s; -o-animation-timing-function:linear; -o-animation-delay:2s; -o-animation-iteration-count:infinite; -o-animation-direction:alternate; -o-animation-play-state:running; } @-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;} } 简写: div { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s linear 2s infinite alternate;
1.animation-name   动画的名称 、
2.animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

3.animation-timing-function 规定动画的速度曲线。默认是 "ease"。
4.animation-delay    规定动画何时开始。默认是 0。
5.animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
/* Firefox: */ -moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */ -webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */ -o-animation:myfirst 5s linear 2s infinite alternate; }


@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;}
}

 

转载于:https://www.cnblogs.com/benpaodegegen/p/7278540.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值