一直到了这一个章节，大部分的 CSS 属性都涉及到了，当然还有一些很基础或者很少用的没有提到，这些我个人建议等到需要的时候去查查手册就够了；另外还有伪元素没有提到过，也就是使用 :: 开头的那些关键字，等一下就做个列表说明一下。
今天的主要内容，是 CSS 的动画和过渡，伪元素的列表以及一个纯 CSS 动画实例的介绍。
1 CSS动画
在网页上创建动画的方式实在太多了，比较早期的 Flash，HTML 5 的 canvas 和 svg 结合 JavaScript，以及我们现在要看的 CSS 动画，都是比较有代表性的。
1.1 @keyframes 规则
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式，也就是声明一个动画动作组或者说关键帧组，并给它命名。
比如，命名一个动画为 firstAnimation，动作为把对象的背景色由红色变成蓝色：
@这里使用 -webkit- 前缀的原因是， Chrome 和 Chromium 浏览器对于较复杂的动画，无法通过原生的 keyframes 支持
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。
可以使用百分比来规定变化发生的时间，或如同上面的列子这样用关键词 from 和 to，它们就等同于 0% 和 100%；0% 是动画的开始，100% 是动画的完成，为了完成动画，我们需要始终定义 0% 和 100% 选择器。
1.2 绑定动画
当然仅仅有动画样式和命名是不够的，之后，我们需要用 animation 把这个动画绑定到对应的元素上去，比如 div：
div 
绑定动画必需两个值：
- 动画的名称，也就是通过 @keyframes 规则命名的那个动画规则组
- 动画持续的时长，如果不设置该值，则动画不生效，因为默认时长是0
1.3 略复杂的动画
@
其实在 @keyframes 当中是可以设置任何 CSS 样式的，所以理论上我们可以做出非常复杂的变化（不过原谅我没什么美术能力，想象力也很普通）：
@
同时，animation 这个属性，其实也是简写属性，它代表了如下几种属性的集合：
- animation-name：绑定动画名称
- animation-duration：指定动画完成一个周期所花费的秒或毫秒，默认是 0
- animation-timing-function：规定动画的速度曲线，可以包含如下值：
- ease：默认，动画以低速开始，然后加快，在结束前变慢
- ease-in：动画以低速开始
- ease-out：动画以低速结束
- ease-in-out：动画以低速开始和结束
- linear：动画匀速进行
- cubic-bezier(x1, y1, x2, y2)：贝塞尔曲线函数，可以自己定义速度曲线
- animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
- animation-delay：规定动画何时开始，默认是 0
- animation-iteration-count：规定动画被播放的次数，默认是 1，除了数字外还可以设为 infinite 进行无限循环
- animation-direction：规定动画是否在下一周期逆向地播放，可以包含如下值：
- normal：默认值，动画按正常播放
- reverse：动画反向播放
- alternate：动画在奇数次正向播放，在偶数次反向播放
- alternate-reverse：动画在奇数次反向播放，在偶数次正向播放
- animation-play-state：规定动画是否正在运行（running）或暂停（pause），默认为 running
举例，一个元素的动画我们可以这样设置：
div 也可以直接用 animation 属性这样设置，效果完全一致：
div 
当然，从 gif 看不太出来动画启动的 2s 时间——怕大家觉得没变化就去掉了——不过实际试一下就知道是怎么一回事啦。
2 过渡
只要使用 transition 属性，就可以看到过渡效果了，它其实就是是元素从一种样式逐渐改变为另一种的效果，可以说也是一种动画，而且连设置的格式也和 animation 很相似：
div 它必需包含两项内容：
- 指定要添加效果的 CSS 属性
- 指定效果的持续时间
然后可以通过伪类对过渡效果发生的时机进行指定，比如常见的把鼠标指针悬浮在元素上：
div 
如果不使用 transition 属性，那么 div 的宽度将在悬浮的瞬间变长，而没有这种动画效果了。
2.1 指定多个过渡效果
通过在多个过渡效果之间使用 , 进行分隔，就可以同时指定多个效果了，比如：
div 
2.2 过渡属性列表
其实 transition 是如下几种属性的简写属性：
- transition-property：指定 CSS 属性名称，也就是 transition 的效果
- transition-duration：指定多少秒或毫秒才能完成，默认是 0
- transition-timing-function：指定过渡效果的速度曲线，可以包含如下值：
- ease：默认，动画以低速开始，然后加快，在结束前变慢
- ease-in：动画以低速开始
- ease-out：动画以低速结束
- ease-in-out：动画以低速开始和结束
- linear：动画匀速进行
- cubic-bezier(x1, y1, x2, y2)：贝塞尔曲线函数，可以自己定义速度曲线
- transition-delay：指定过渡何时开始，默认是 0
举例，最开始的过渡效果我们可以这样设置：
div 也可以直接用 transition 属性这样设置，效果完全一致：
div 这里就不重复使用一张图片了，因为相对比较简单，还是自己试一下更容易掌握。
3 伪元素
CSS 伪元素是一个附加至选择器末的关键词，允许对被选择元素的特定部分修改样式，从 CSS 3 开始明确规定伪元素需要使用双冒号 :: 标示，包括如下这些（其实在基本样式（1）这章，选择器一节的最后一部分已经有个比较详细的列表了）：
- ::after (:after)：向选定的元素后插入内容
- ::before (:before) ：向选定的元素前插入内容
- ::cue (:cue) ：匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索
- ::first-letter (:first-letter) ：选择元素第一个字母
- ::first-line (:first-line) ：选择选择器第一行
- ::selection ：应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）
- ::slotted() ：用于选定那些被放在 HTML模板 中的元素，仅仅适用于 影子节点树(Shadow Dom)，并且只会选择实际的元素节点，而不包括文本节点
按照规范，应该使用双冒号 :: 而不是单个冒号 :，以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素，考虑到规范使用，建议以后统一使用双冒号。
伪元素与伪类的最根本不同不是在写法上，而是一个选择器中只能使用一个伪元素。
这个就没什么例子好说了，试着用一下就很容易理解了。
4 一个纯 CSS 动画实例
可以点击这里查看在线的演示：https://www.html5tricks.com/demo/pure-css3-clock/index.html
当然如果自己感兴趣的话，可以看看源代码，HTML 部分很简单，如下：
<!DOCTYPE html>
CSS 的部分相对复杂，因为考虑到了大多数主流浏览器的兼容性，所以有不少带有对应浏览器前缀的冗余代码：
.最终实现的效果如下：
希望这个可以对大家有所启发。
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
