046_CSS3动画

最新推荐文章于 2025-05-06 22:21:19 发布

原创最新推荐文章于 2025-05-06 22:21:19 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #web前端

css学习专栏收录该内容

52 篇文章

订阅专栏

1. 通过CSS3, 我们能够创建动画, 这可以在许多网页中取代动画图片、Flash动画以及JavaScript。

2. CSS3动画属性

3. @keyframes规则

3.1. 通过@keyframes规则, 您能够创建动画。

3.2. 创建动画的原理是, 将一套CSS样式逐渐变化为另一套样式。

3.3. 在动画过程中, 您能够多次改变这套CSS样式。

3.4. 以百分比来规定改变发生的时间, 或者通过关键词"from"和"to", 等价于0%和100%。

3.5. 0%是动画的开始时间, 100%动画的结束时间。

3.6. 为了获得最佳的浏览器支持, 您应该始终定义0%和100%选择器。

3.7. 请使用动画属性来控制动画的外观, 同时将动画与选择器绑定。

3.8. 您必须定义动画的名称和时长。如果忽略时长, 则动画不会允许, 因为默认值是0。

3.9. 必须值

3.10. 实例

@keyframes mymove
{
	0% {
		top: 0px;
	}
	25% {
		top: 200px;
	}
	50% {
		top: 100px;
	}
	75% {
		top: 200px;
	}
	100% {
		top: 0px;
	}
}

4. animation属性

4.1. animation 属性是一个简写属性, 用于设置八个动画属性:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
animation-fill-mode

4.2. 请始终规定animation-duration属性, 否则时长为0, 就不会播放动画了。

4.3. 默认值

4.4. 可能值

5. animation-name属性

5.1. animation-name属性为@keyframes动画规定名称。

5.2. 默认值

5.3. 可能值

6. animation-duration属性

6.1. animation-duration属性定义动画完成一个周期所需要的时间, 以秒或毫秒计。

6.2. 默认值

6.3. 可能值

7. animation-timing-function属性

7.1. animation-timing-function规定动画的速度曲线。

7.2. 速度曲线定义动画从一套CSS样式变为另一套所用的时间。

7.3. 速度曲线用于使变化更为平滑。

7.4. 默认值

7.5. animation-timing-function使用名为三次贝塞尔(Cubic Bezier)函数的数学函数, 来生成速度曲线。您能够在该函数中使用自己的值, 也可以预定义的值:

7.6. 实例

#div1 {
	animation-timing-function: linear;
}
#div2 {
	animation-timing-function: ease;
}
#div3 {
	animation-timing-function: ease-in;
}
#div4 {
	animation-timing-function: ease-out;
}
#div5 {
	animation-timing-function: ease-in-out;
}

7.7. cubic-bezier实例

#div1 {
	animation-timing-function: cubic-bezier(0,0,1,1);
}
#div2 {
	animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);
}
#div3 {
	animation-timing-function: cubic-bezier(0.42,0,1,1);
}
#div4 {
	animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {
	animation-timing-function: cubic-bezier(0.42,0,0.58,1);
}

8. animation-delay属性

8.1. animation-delay属性定义动画何时开始。

8.2. animation-delay值以秒或毫秒计。

8.3. 允许负值, -2s使动画马上开始, 但跳过2秒进入动画。

8.4. 默认值

8.5. 可能值

9. animation-iteration-count属性

9.1. animation-iteration-count属性定义动画的播放次数。

9.2. 默认值

9.3. 可能值

10. animation-direction属性

10.1. animation-direction属性定义是否应该轮流反向播放动画。

10.2. 如果animation-direction值是"alternate", 则动画会在奇数次数(1、3、5 等等)正常播放, 而在偶数次数(2、4、6 等等)向后播放。

10.3. 如果把动画设置为只播放一次, 则该属性没有效果。

10.4. 默认值

10.5. 可能值

11. animation-play-state属性

11.1. animation-play-state属性规定动画正在运行还是暂停。

11.2. 默认值

11.3. 可能值

12. animation-fill-mode属性

12.1. animation-fill-mode属性规定动画在播放之前或之后, 其动画效果是否可见。

12.2. 其属性值是由逗号分隔的一个或多个填充模式关键词。

12.3. 默认值

12.4. 可能值

13. 例子

13.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS3动画</title>

		<style type="text/css">
			div {
				margin: 20px;
			}
			#div1 {
				width: 100px;
				height: 100px;
				background: pink;
				float: left;
				animation-name: myfirst;
				animation-duration: 10s;
				animation-timing-function: linear;
				animation-delay: 1s;
				animation-iteration-count: 3;
				animation-direction: normal;
				animation-play-state: running;
				animation-fill-mode: backwards;
			}
			#div2 {
				width: 100px;
				height: 100px;
				background: pink;
				float: left;
				animation: myfirst 10s ease 1s 3 alternate running forwards;
			}
			#div3 {
				width: 100px;
				height: 100px;
				background: pink;
				float: left;
				animation: myfirst 10s ease-in 1s 2 alternate running both;
			}
			@keyframes myfirst {
				0% {
					background: red;
				}
				25% {
					background: yellow;
				}
				50% {
					background: blue;
				}
				75% {
					background: green;
				}
				100% {
					background: #00FF00;
				}
			}
		</style>
	</head>
	<body>
		<div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div>
		
	</body>
</html>

13.2. 效果图