css3关键帧动画animation

CSS关键帧动画

  • @keyframes 设定动画规则。

  • animation 所有动画属性的简写属性,用于设置六个动画属性:

    animation-name/animation-duration/animation-timing-function/animation-delay/
    animation-iteration-count/animation-direction

  1. animation-name 属性为@keyframes 动画规则名称。若设置为none则覆盖已有的动画效果。

  2. animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是0。

  3. animation-timing-function 规定动画的速度曲线。默认是“ease”。

    (1) linear规定以相同速度开始至结束的过度效果(等于cubic-bezier(0,0,1,1))。

    (2) ease 规定慢速开始,然后变快,然后慢速结束的动画效果。(等于cubic-bezier(0.25,0.1,0.25,1))

    (3) ease-in 规定以慢速度开始的过度效果。(等于cubic-bezier(0.42,0,1,1))

    (4) ease-out 规定以慢速度结束的过度效果。(等于cubic-bezier(0,0,0.5,1))

    (5) ease-in-out 规定以慢速度开始和结束的过渡效果。(等于cubic-bezier(0.42,0,0.58,1))

    (6) cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。

  4. animation-delay 规定动画延迟时间。默认是0。

  5. animation-iteration-count 规定动画被播放的次数。默认是1。infinite为无限次数播放。

  6. animation-direction 规定动画是否在下一周期逆向播放。默认是“normal顺序播放”。/alternate动画应该轮流反向播放。

  7. animation-play-state 规定动画是否在运行或暂停。默认是“running规定动画正在播放。”/paused规定动画暂停。

  8. animation-fill-mode 规定对象动画时间之外的状态。

    (1) none 不改变默认行为。

    (2) forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

    (3) backwards 在animation-delay 所指的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

    (4) both 向前和向后填充模式都被应用。

#div1 {
				width: 150px;
				height: 150px;
				background: aqua;
				border: #996633 3px double;
				/*设置动画的名称和事件*/
				animation-name: mydh;
				animation-duration: 3s;
				animation-timing-function: linear;
				/*规定动画的速度曲线*/
				animation-delay: 1s;
				/*规定动画何时开始。默认是0。*/
				animation-iteration-count: 3;
				/*规定动画被播放的次数。默认是1。infinite为无限次数播放。*/
				animation-direction: alternate;
				/*规定动画是否在下一周期逆向播放。默认是“normal顺序播放”。/alternate动画应该轮流反向播放。*/
				animation-fill-mode: forwards;
				/*规定对象动画时间之外的状态。*/
			}
			
			#div2 {
				margin-top: 30px;
				width: 150px;
				height: 150px;
				background: yellow;
				border: green 3px double;
				/*复合属性*/
				animation: mydh 8s ease 0s 4 alternate;
			}
			/*设置动画起始位置*/
			
			@keyframes mydh {
				/*第一种动画方式*/
				from {
					margin-left: 20px;
					background: yellow;
				}
				to {
					margin-left: 800px;
					background: yellowgreen;
				}
			}
		<div id="div1">
		</div>
		<div id="div2">
		</div>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值