CSS3动画

过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

它是如何工作的？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性

• 指定效果的持续时间。

示例代码如下：

div {
	width: 100px;
	height: 100px;
	background: red;
	transition: width 2s;
	-webkit-transition: width 2s;
	-o-transition: width 2s;
}

[解析]  应用于宽度属性的过渡效果，时长为 2 秒。

如果未指定的期限，transition 将没有任何效果，因为默认值是 0。

定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

div:hover {
	width: 200px;
}

[解析]  当前实例中，当鼠标光标移动到该元素时，它逐渐改变原有样式。

多项改变

要添加多个样式的变换效果，添加的属性由逗号分隔。

示例代码如下：

div.transition {
	width: 100px;
	height: 100px;
	color: white;
	text-align: center;
	transform: rotateZ(0deg);
	background: red;
	transition: width 2s, height 2s, transform 2s;
	-webkit-transition: width 2s, height 2s, transform 2s;
	-o-transition: width 2s, height 2s, transform 2s;
}
div.transition:hover {
	width: 300px;
	height: 300px;
	transform: rotateZ(45deg);
}

[解析]  当前实例中，添加了宽度，高度和转换效果。

速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

• ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）

• linear - 规定从开始到结束具有相同速度的过渡效果

• ease-in -规定缓慢开始的过渡效果

• ease-out - 规定缓慢结束的过渡效果

• ease-in-out - 规定开始和结束较慢的过渡效果

• cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

下面的例子展示了可以使用的一些不同的速度曲线：

div {
	width: 200px;
	height: 50px;
	color: white;
	text-align: center;
	background: red;
	transition: width 2s;
	-webkit-transition: width 2s;
	-o-transition: width 2s;
}
div:hover {
	width: 300px;
}
.timing1 {
	transition-timing-function: linear;
}
.timing2 {
	transition-timing-function: ease;
}
.timing3 {
	transition-timing-function: ease-in;
}
.timing4 {
	transition-timing-function: ease-out;
}
.timing5 {
	transition-timing-function: ease-in-out;
}

延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

下例在启动之前有 1 秒的延迟：

div {
  transition-delay: 1s;
}

简写属性

实例：

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 2s;
}

以上样式可简写为：

div {
  transition: width 2s linear 2s;
}

动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

什么是 CSS 动画？

动画使元素逐渐从一种样式变为另一种样式。

您可以随意更改任意数量的 CSS 属性。

如需使用 CSS 动画，您必须首先为动画指定一些关键帧。

关键帧包含元素在特定时间所拥有的样式。

@keyframes 规则

如果你在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

示例代码如下：  

/* 动画代码 */
@keyframes example1 {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
/* 应用动画的元素 */
.example1 {
	animation-name: example1;
	animation-duration: 4s;
}

[解析]  这个实例中，动画将持续 4 秒钟，同时将 <div> 元素的背景颜色从“red”逐渐改为“yellow”。

animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

在上面的例子中，通过使用关键字“from”和“to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。

你也可以使用百分比值。通过使用百分比，你可以根据需要添加任意多个样式更改。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改 <div> 元素的背景颜色：

示例代码如下：

/* 动画代码 */
@keyframes example2 {
	0% {
		background-color: red;
	}
	25% {
		background-color: yellow;
	}
	50% {
		background-color: blue;
	}
	100% {
		background-color: green;
	}
}
/* 应用动画的元素 */
.example2 {
	animation-name: example2;
	animation-duration: 4s;
}

 

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改背景颜色和 <div> 元素的位置：

实例代码如下：

/* 动画代码 */
@keyframes example3 {
	0% {
		background-color: red;
		left: 0px;
		top: 0px;
	}
	25% {
		background-color: yellow;
		left: 200px;
		top: 0px;
	}
	50% {
		background-color: blue;
		left: 200px;
		top: 200px;
	}
	75% {
		background-color: green;
		left: 0px;
		top: 200px;
	}
	100% {
		background-color: red;
		left: 0px;
		top: 0px;
	}
}
/* 应用动画的元素 */
.example3 {
	animation-name: example3;
	animation-duration: 4s;
}

延迟动画

animation-delay 属性规定动画开始的延迟时间。

示例1：

div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
}
@keyframes example1 {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
.example1 {
	animation-name: example1;
	animation-duration: 4s;
	animation-delay: 2s;
}

[解析]  这个实例中，在开始动画前有 2 秒的延迟。

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

示例2：

@keyframes example2 {
	from {
		background-color: red;
	}
	
	to {
		background-color: yellow;
	}
}
.example2 {
	animation-name: example2;
	animation-duration: 4s;
	animation-delay: -2s;
}

[解析]  这个实例中，动画将开始播放，就好像它已经播放了 2 秒钟一样。

运行次数

animation-iteration-count 属性指定动画应运行的次数。

实例：

@keyframes example {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: 3;
}

 

反向或交替运行动画

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

• normal - 动画正常播放（向前）。默认值

• reverse - 动画以反方向播放（向后）

• alternate - 动画先向前播放，然后向后

• alternate-reverse - 动画先向后播放，然后向前

实例：

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

[解析]  这个实例中，将以相反的方向（向后）运行动画。

速度曲线

 

animation-timing-function 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

• ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）

• linear - 规定从开始到结束的速度相同的动画

• ease-in - 规定慢速开始的动画

• ease-out - 规定慢速结束的动画

• ease-in-out - 指定开始和结束较慢的动画

• cubic-bezier(*n*,*n*,*n*,*n*) - 运行您在三次贝塞尔函数中定义自己的值

下面这些例子展示了可以使用的一些不同速度曲线：

div {
	width: 200px;
	height: 50px;
	color: white;
	text-align: center;
	position: relative;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
}
@keyframes example {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
.example1 {
	animation-timing-function: linear;
}
.example2 {
	animation-timing-function: ease;
}
.example3 {
	animation-timing-function: ease-in;
}
.example4 {
	animation-timing-function: ease-out;
}
.example5 {
	animation-timing-function: ease-in-out;
}

填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

• none - 默认值。动画在执行之前或之后不会对元素应用任何样式。

• forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。

• backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。

• both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

实例：

@keyframes example {
	from {
		background-color: red;
	}
	to {
		background-color: yellow;
	}
}
div {
	width: 100px;
	height: 100px;
	position: relative;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
	animation-fill-mode: forwards;
}

[解析]  这个实例中，<div> 元素在动画结束时保留来自最后一个关键帧的样式值。