html5--6-55 动画效果-关键帧动画
实例
1 @charset="UTF-8"; 2 div{ 3 width: 150px; 4 height: 150px; 5 font-size: 24px; 6 background: rgba(160,30,12,0.9); 7 8 animation-name:mydh; 9 animation-duration:1s; 10 animation-timing-function:linear; 11 animation-delay:0.2s; 12 animation-iteration-count:infinite; 13 } 14 15 @keyframes mydh{ 16 /* 动画的起点*/ 17 /* 18 from{ 19 margin-left: 50px; 20 background: green; 21 } 22 */ 23 /* 动画的终点*/ 24 /* 25 to{ 26 margin-left: 300px; 27 background: blue; 28 } 29 */ 30 31 0%{ 32 margin-left: 50px; 33 background: green; //相当于动画影片的开场剧情 34 } 35 36 37 38 39 100%{ 40 margin-left: 300px; //相当于动画影片的大结局 41 background: blue; 42 } 43 }
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <title>6-54课堂演示</title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <div>关键帧动画</div> 10 </body> 11 </html>
1 @charset="UTF-8"; 2 3 div{ 4 width: 150px; 5 height: 150px; 6 font-size: 24px; 7 background: rgba(160,30,12,0.9); 8 animation: mydh 2s ease 0s 2 alternate; 9 10 /* animation-name:mydh; 11 animation-duration:2s; 12 animation-timing-function:linear; 13 animation-delay: 1s; 14 animation-iteration-count:1; 15 animation-direction: alternate; 16 animation-fill-mode:both; */ 17 } 18 19 @keyframes mydh{ 20 21 0%{ 22 margin-top: 50px; 23 background: green; //相当于动画影片的开场剧情 24 } 25 26 50%{ 27 margin-top: 150px; 28 margin-left: 300px; //相当于动画影片中间的其他剧情 29 background: red; 30 } 31 32 33 100%{ 34 margin-top: 300px; 35 margin-left: 50px; //相当于动画影片的大结局 36 background: blue; 37 } 38 } 39 40 41 -webkit-animation; 42 -moz-animation; 43 -ms-animation; 44 -o-animation; 45 animation;
学习要点
- 掌握动画的实现和应用
CSS3 动画属性：
通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
- @keyframes 设定动画规则。可以近似理解为动画的剧本。
- name 必需。定义动画的名称。
- 0-100%/from...to... 必需。动画时长的百分比。
- 需要变化的 CSS 样式属性:必需。
- animation 所有动画属性的简写属性，用于设置六个动画属性：animation-name/animation-duration/animation-timing-function/animation-delay/animation-iteration-count/animation-direction
- animation-name 属性为 @keyframes 动画规定名称。若设置为none则覆盖已有的动画效果。
- animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
- animation-timing-function 规定动画的速度曲线。默认是 "ease"。
- linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
- animation-delay 规定动画何时开始。默认是 0。
- animation-iteration-count 规定动画被播放的次数。默认是 1。infinite为无限次播放。
- animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal 顺向播放"。/ alternate 动画应该轮流反向播放。
- animation-play-state 规定动画是否正在运行或暂停（结合js代码控制暂停）。默认是 "running 规定动画正在播放。"。/paused 规定动画暂停。
- animation-fill-mode（最后一帧停的位置） 规定对象动画时间之外的状态。
- none 不改变默认行为。
- forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
- backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
- both 向前和向后填充模式都被应用。