Click Here For Contents Table
他们如何工作？
动画和过渡标签摘要属性，所有的各种选择，你可以申请一个动画或过渡组成。 他们主要是做运动的物体或设置一个过渡阶段，使事情出现更加顺畅。 在互联网上显示的能力，CSS3和这些属性的表带来多种已组成一个例子。
区别
动画和过渡之间的主要区别是一个过渡只能改变一个元素到另一个元素上悬停或当变得活跃，即通过一个伪类。 动画可以无需任何用户交互的页面加载启动，但仍然可以混在与用户的互动。 双方都有自己的利益，并以自己独特的情况非常有用。 不过需要更复杂的效果，这反过来又需要动画关键帧动画的语法。
支持
这些功能都相当受欢迎，等主流浏览器都纳入实验性支持。 歌剧是个例外，不支持动画，但支持转换。
| Webkit的 | 壁虎 | 三叉戟 | 急板 | |
| 过渡性质 | 实验 | 实验 | 实验 | 实验 |
| 动画属性 | 实验 | 实验 | 实验 | 不支持 |
动画
主要语法
由逗号分隔多个动画。 而不是单独做每一个位，你可以做到这一切，一次与主要的语法。 只要坚持到不同地区，像下面的animation 。
|
1
|
animation: [ <animation-name> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction> <animation-fill-mode> ], [apply another animation] |
上述每个选项可以单独设置，这是非常有用的，但是这仅仅是有用的，一旦你设置关键帧。 W3C提出语法是这样的：
|
1
2
3
4
5
6
7
8
|
@keyframes NAME-OF-ANIMATION { 0% { /* CSS for 0% */ } 100% { /* CSS for 100% */ }} |
你在0％支架的CSS将立即发生，尽快启动动画。 100％的动画是什么会发生在年底。 0％和100％，虽然不要求，你可以很容易地使用50% {中途会发生什么，甚至46% { 。 哎呀，你甚至不需要2帧！ 正如你可能会说，这给了我们很大的灵活性！
然而，因为浏览器的兼容性，其实，这些功能仍处于试验阶段，我们需要添加浏览器扩展到每个CSS标记开始。 因此，例如，因为动画的Webkit，Firefox和Internet Explorer（平台预览）的支持，我们把它写更多类似这样的：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
@-webkit-keyframes NAME-OF-ANIMATION { 0% { /* CSS for 0% */ } 100% { /* CSS for 100% */ }}@-moz-keyframes NAME-OF-ANIMATION { 0% { /* CSS for 0% */ } 100% { /* CSS for 100% */ }}@-ms-keyframes NAME-OF-ANIMATION { 0% { /* CSS for 0% */ } 100% { /* CSS for 100% */ }} |
注意我们是如何增加MOZ-，-webkit的和ms的开始关键帧属性。 一切可以填写，但请记住，你将有多次填补它（就目前而言，直到它完全支持）。
后，我们像上面的动画，我们必须决定我们将它应用到。 所以，当你添加完一堆风格的关键帧，选择你想套用动画的div或span。 如前所述，有一堆选项，帮助您更精确地控制动画是如何工作的。
•动画名称
正如我们前面所做的那样，我们设置一个关键帧的名称。 所以申请的动画需要设置动画属性。 这些动画的名字和动画时间 。 作为一个方面说明，（再次）浏览器的支持，因为仍处于实验阶段，我们必须添加-MOZ-，-webkit的或毫秒开始。 所以它看起来有点像这样的东西：
|
1
2
3
|
-webkit-animation-name: name; /* The animation we're running */-moz-animation-name: name;-ms-animation-name: name; |
请记住，它仍然需要我们设置的持续时间和定时功能，使动画作品。 可以做多个动画
•动画的持续时间
时间是你想运行动画的时间长度，以秒为单位。
|
1
2
3
|
-webkit-animation-duration: 1s; /* Runs for 1 second */-moz-animation-duration: 1s;-ms-animation-duration: 1s; |
•动画计时功能
你想申请到动画的时机。 有不同的选项可供选择，包括：
- 缓解 – 在启动缓慢，速度快，在中间，在年底缓慢
- 线性 – 速度相同的整体方式通过
- 易用性 – 在启动缓慢
- 易用性 – 先快后慢
- 易用性的 – 在开始和结束缓慢
- 立方贝塞尔（数目，数量，编号，数量） – 设置基于三次贝塞尔函数的另一个速度，数字应该是0到1
作为一个例子，我们可以这样做：
|
1
2
3
|
-webkit-animation-timing-function: ease-in;-moz-animation-timing-function: ease-in;-ms-animation-timing-function: ease-in; |
•动画延迟
这可以让你拖延的动画开始时，因此，我们可以延迟2秒说：
|
1
2
3
|
-webkit-animation-delay: 2s;-moz-animation-delay: 2s;-ms-animation-delay: 2s; |
•动画迭代计数
次的动画会重复。 您还可以使重复无限使用infinite关键字。 否则，它只是一个数字。
|
1
2
3
|
-webkit-animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;-ms-animation-iteration-count: infinite; |
•动画方向
动画应该朝哪个方向着手。您可以发挥它的关键字通常normal或候补（使用关键字alternate ），在它前进的第一次，它会向后第二次，那么它前进的第三次，等等。
|
1
2
3
|
-webkit-animation-direction: alternate; /* Alternating */-moz-animation-direction: alternate;-ms-animation-direction: alternate; |
•动画填充模式
设置精加工设定。 例如，如果设置forwards然后不管你定义为最后一个关键帧。 将在动画（假设它不重复无限）年底发生的事情。 如果你设置这个backwards然后不管你，你的第一个关键帧设置将如何结束。 这是有用的动画悬停以上效果。
|
1
2
3
|
-webkit-animation-fill-mode: forwards;-moz-animation-fill-mode: forwards;-ms-animation-fill-mode: forwards; |
摘要范例
作为总结，这里是一个动画的例子， 在这个动画，只要页面加载每格将发展超过10秒的红色背景，并保持，直到用户刷新红色或离开页面 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
@-webkit-keyframes turn-red { 100% { background: red; }}@-moz-keyframes turn-red { 100% { background: red; }}@-ms-keyframes turn-red { 100% { background: red; }}div { background: white; -webkit-animation: turn-red 10s ease-in forwards; -moz-animation: turn-red 10s ease-in forwards; -ms-animation: turn-red 10s ease-in forwards; -o-animation: turn-red 10s ease-in forwards;} |
转换
主要语法
而不是单独做每一个位，你可以做到这一切，一次与主要的语法。 只要坚持到不同地区，象下面这样的transition 。
|
1
|
transition: [ <transition-property> <transition-duration> <transition-timing-function> <transition-delay> ], [comma separates multiple transitions] |
用逗号分隔定义多个过渡。 转换是比动画更有限。 过渡有两个伪类的地方，例如，一个过渡通常设置在主类。 因此，例如，我们可能有这样一套东西：
|
1
2
3
4
5
6
7
8
9
10
|
.main { /* transition set here */}.main:hover,.main:active,.main:focus { /* transition will effect this assuming that the correct properties are mentioned in the transition phase. */} |
因此，有两件事你必须定义一个过渡工作。 这些你想申请的过渡时间和财产。 一般来说，我申请在整体转型标记他们，但我们将通过他们单独去，所以你能理解！
•过渡物业
我们仍然有添加浏览器特定的标记，每个属性开始，因为这是实验性的东西。 不要忘了，Opera支持此功能！ 过渡性质的财产，你要蒸腾。 例如，如果你想要的东西流畅到左侧，你会设置你或者你可以说’所有’转换适用于伪元素的所有属性。 在短短的CSS属性，你要过境 。
|
1
2
3
4
|
-webkit-transition-property: left; /* So it would possibly slide to the right */-moz-transition-property: left;-ms-transition-property: left;-o-transition-property: left; |
•过渡的持续时间
的时间长度的过渡工作。
|
1
2
3
4
|
-webkit-transition-property: 1s;-moz-transition-property: 1s;-ms-transition-property: 1s;-o-transition-property: 1s; |
•过渡定时功能
类似我们在动画节。 在这里，他们是再懒惰的感觉，如果你：
- 缓解 – 在启动缓慢，速度快，在中间，在年底缓慢
- 线性 – 速度相同的整体方式通过
- 易用性 – 在启动缓慢
- 易用性 – 先快后慢
- 易用性的 – 在开始和结束缓慢
- 立方贝塞尔（数目，数量，编号，数量） – 设置基于三次贝塞尔函数的另一个速度，数字应该是0到1
|
1
2
3
4
|
-webkit-timing-function: linear;-moz-timing-function: linear;-ms-timing-function: linear;-o-timing-function: linear; |
•过渡延迟
再次，延误过渡开始前，类似动画延时。
|
1
2
3
4
|
-webkit-transition-delay: 2s;-moz-transition-delay: 2s;-ms-transition-delay: 2s;-o-transition-delay: 2s; |
摘要范例
总结，这里是一个例子。 在这个例子中的任何分区，将改变从黑色文本上空盘旋时，以红色文字 。 上徘徊，黑色文字会再次出现。
|
1
2
3
4
5
6
7
8
9
10
|
div { color: black; -webkit-transition: color 2s ease-in; -moz-transition: color 2s ease-in; -ms-transition: color 2s ease-in; -o-transition: color 2s ease-in;}div:hover { color: red;} |
