接着之前的[css]我要用css画幅画(四)， 这次我给小明和静静增加了对话，用了简单的动画效果。
github：https://github.com/bee0060/Css-Paint ， 完整代码在pages/sun-house-5.html和相关的css中可以找到
demo： http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-5.html
完整html如下：
1 <!DOCTYPE html> 2 <html lang="en" 3 head 4 meta charset="UTF-8" 5 title>Css Paint</ 6 link rel="stylesheet" type="text/css" href="../css/sun.css" /> 7 ="../css/house.css" 8 ="../css/human.css" 9 ="../css/cloud.css" 10 11 ="../css/human-animate.css" 12 13 body14 div class="sun"15 ="sun-body"></div16 ="sun-shine-light sun-shine-light1"17 ="sun-shine-light sun-shine-light2"18 ="sun-shine-light sun-shine-light3"19 ="sun-shine-light sun-shine-light4"20 ="sun-shine-light sun-shine-light5"21 22 23 ="house-width house"24 ="house-width house-roof house-roof-left"25 ="house-width house-roof house-roof-right"26 ="house-width house-wall"> 27 ="house-wall-door"> 28 ="house-wall-door-handle"29 30 31 32 33 ="human human-pos-1"34 p ="lines human-speak">大家好，我叫小明。p35 ="lines human-speak human-speak-delay-3">我是一个程序员，最喜欢宅在家里LOL。36 ="lines human-speak human-speak-delay-12">静静，我们交个朋友好吗？我的电话是13800123456。37 ="human-head-normal"38 ="human-body-normal"39 ="human-arms-normal"40 ="human-legs-normal"41 42 43 ="human human-pos-2"44 ="lines human-speak human-speak-delay-6">大家好，我叫静静45 ="lines human-speak human-speak-delay-9">和大家看到的一样，我热爱舞蹈。46 ="lines human-speak human-speak-delay-15">不要，程序员什么的最讨厌了！47 48 49 50 ="human-legs-1"51 52 53 ="cloud cloud-pos cloud-pos-1"54 ="cloud-pos cloud-border cloud-bg cloud-top"55 ="cloud-pos cloud-border cloud-bg cloud-left"56 ="cloud-pos cloud-border cloud-bg cloud-right"57 ="cloud-pos cloud-border cloud-bg cloud-bottom"58 59 ="cloud cloud-pos cloud-pos-2"60 61 62 63 64 65 66 html>
我将所需的动画css放在独立的文件中：
1 .human-speak { 2 color: #fff; 3 float: left; 4 -webkit-animation-duration: 3s; 5 -webkit-animation-name: humanLineAppear; 6 } 7 8 .human-speak-delay-3 { 9 -webkit-animation-delay: 3s 10 } 11 12 .human-speak-delay-6 { 13 6s 14 } 15 16 .human-speak-delay-9 { 17 9s 18 } 19 20 .human-speak-delay-12 { 21 12s 22 } 23 24 .human-speak-delay-15 { 25 15s 26 } 27 28 @-webkit-keyframes humanLineAppear{ 29 from{ 30 top: -50px; 31 color:32 } 33 20%{ 34 -40px; 35 #000; 36 z-index:10; 37 } 38 80%{ 39 40 41 42 } 43 to{ 44 45 46 1; 47 } 48 }
这里用到的陌生的css属性或关键字包括：
1. -webkit-animation-duration
2.-webkit-animation-delay
3. -webkit-animation-name
4.@-webkit-keyframes
照例先上MDN文档地址： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations
动画系（animation属性及其子属性）的css在chrome中都需要加上浏览器前缀（-webkit-)， 本以为前卫的chrome中不需要加前缀了，小小的遗憾了一把。下面的说明都把前缀省略。
以上1-3都是css属性，可以添加在css选择器中，或以内联属性的方式直接添加在标签的style属性中。
而第4个keyframes不同，下面再说。
1.animation-duration： 指定整个动画执行所需的时间， 接受time格式的值，即必须是数字+单位的格式， 单位可以是s（秒）或ms(毫秒），默认值为0s。
2.animation-delay： 指动画延迟执行的时间，即对象加载完毕到开始执行动画之间的时间，接受的时间格式也是时间，默认值为0s。
3.animation-name： 用于指定使用的动画规则名称（用@keyframes声明的规则）。 默认值为none。可以设置多个规则，以逗号分隔。
4.@keyframes：这是一个关键字， 中文翻译是“关键帧”。 开头的“@”符号是必须的，加上浏览器前缀时应该写成： @-webkit-keyframes yourKeyframesName， 其中yourKeyframesName是你的关键帧名称。
该关键字用于声明动画规则，也可以看作一个特殊的选择器。 有点类似js中用于声明函数的function关键字。 语法类似如下：（示例中增加了-wekit-前缀）
5 } 6 7 8 10 } 11 12 14 15 } 18 19 20 } 21 }
关键帧的语法如上，关键帧内部以类似选择器的方式书写css属性，但是“选择器” 名字不再是id、className， 而是帧的描述， 或叫时间节点的描述，接受from,to或百分比数值。
其中from等同于0%， to等同于100%，
0%表示动画开始时刻， 100%表示结束时刻。 如果动画执行时间（animation-duration属性的值）是10s,那么50%表示第5秒这个时刻。
里面的每个百分比数值，都代表动画执行过程中的一个时间节点，我们暂称为： “帧”， 而帧的CSS属性集合，暂称为“帧选择器”。
帧选择器用于设置动画运行中某时间节点的css样式。
不同帧之间如果设置了相同的css属性名和不同的属性值，
浏览器会按照帧的时间顺序，针对这个CSS属性，找到属性值不同的最相邻的帧的组合（可能有多个帧的组合），以示例中的代码为例， 对于top属性会找到如下组合：
1. from(0%) --> 20% : top从-50px 变为-40px
2. 80% --> to(100%) : top从-40px 变为-50px
上面的帧组合都有开始和结束帧，且其中都包含至少一个CSS属性的改变，我们暂时称其为： “帧区间”。
浏览器在动画执行时， CSS属性会在帧区间内，从开始帧指定的属性值增加或减少至结束帧指定的属性值， 改变速度根据animation-timing-function设置的缓动函数进行变化，这个属性还没研究过，以后有机会再讨论。
--------------------------------------------------------------------------- 我是突兀的分割线 ---------------------------------------------------------------------------
要让一个动画生效， 以下3个条件必须满足：
1. animation-name需要指向一个有效的用@keyframes声明的关键帧 ， 表示动画有一个有效的动画规则。
2. animation-duration大于0s， 表示动画会有大于0秒的执行时间。
3. animation-iteration-count大于0， 表示动画至少会执行1次。（该属性默认值是1，所以一般不用设置就可以）
好了，现在你应该也可以写一个属于自己的简单动画了。
今天就到这里， 谢谢观看。 如有错误，欢迎指正。