CSS动画

@keyframes

规定动画，必须定义动画的名称，动画时长的百分比，一个或多个css样式属性

以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%

语法：@keyframes animationname {keyframes-selector {css-styles;}}

animation

是一个简写属性，用于设置六个动画属性：

animation-name

规定@keyframes动画的名称

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是0

animation-timing-function

规定动画的速度曲线，速度曲线用于使变化更为平滑

linear 动画从头到尾的速度是相同的

ease 默认。动画以低速开始，然后加快，在结束前变慢

ease-in 动画以低速开始

ease-out 动画以低速结束

ease-in-out 动画以低速开始和结束

cubic-bezier(n,n,n,n) 在cubic-bezier函数中自己的值。可能的值是从0到1的数值

animation-delay

规定动画何时开始。默认是0

animation-iteration-count

规定动画被播放的次数。默认是1

infinite 规定动画应该无限次播放

animation-direction

规定动画是否在下一周期逆向地播放

normal 默认值。动画应该正常播放

alternate 交替更改动画的执行方向

reverse 反方向执行动画

alternate-reverse 从反方向开始交替更改动画的执行方向

animation-play-state

规定动画是否正在运行或暂停。默认是"running"

paused 规定动画已暂停

running 规定动画正在播放

animation-fill-mode

规定动画在播放之前或之后，其动画效果是否可见

none 不改变默认行为

forwards 当动画完成后，保持最后一个属性值(在最后一个关键帧中定义)

backwards 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值(在第一个关键帧中定义)

both 向前和向后填充模式都被应用

例子：

用CSS做一个下拉式导航

 1  1 <!DOCTYPE html>
 2  2 <html>
 3  3 <head>
 4  4 <meta charset="UTF-8">
 5  5 <title></title>
 6  6 <style type="text/css">
 7  7 *{
 8  8 padding: 0;
 9  9 margin: 0;
10 10 font-family: "微软雅黑";
11 11 }
12 12 #dropmenu{
13 13 text-align: center;
14 14 width: 100px;
15 15 height: 300px;
16 16 margin: 10px auto;
17 17 
18 18 }
19 19 #dropmenu:hover ul{
20 20 animation: demo 0.3s linear forwards ;
21 21 }
22 22 #dropmenu a{
23 23 display: inline-block;
24 24 width: 100px;
25 25 height: 30px;
26 26 line-height: 30px;
27 27 background-color: #00FF00;
28 28 border-radius: 10px;
29 29 margin:5px 0;
30 30 padding: 2px 0;
31 31 color: #fff;
32 32 text-decoration: none;
33 33 font-weight: bold;
34 34 
35 35 }
36 36 
37 37 
38 38 #dropmenu ul{
39 39 width:100px;
40 40 height:0;
41 41 overflow: hidden;
42 42 /*transition:all 1s;*/
43 43 
44 44 }
45 45 #dropmenu ul li{
46 46 background-color: #666666;
47 47 list-style: none;
48 48 color: #fff;
49 49 line-height:2em;
50 50 padding-bottom: 5px;
51 51 margin-bottom: 2px;
52 52 
53 53 
54 54 }
55 55 #dropmenu ul li:hover{
56 56 background-color: #00FF00;
57 57 color:#FFFFFF;
58 58 }
59 59 @keyframes demo{
60 60 from{height: 0;}
61 61 to{height: 300px;}
62 62 }
63 63 </style>
64 64 </head>
65 65 <body>
66 66 <div id="dropmenu">
67 67 <a href="#">导航</a>
68 68 <ul>
69 69 <li>AAA</li>
70 70 <li>AAA</li>
71 71 <li>AAA</li>
72 72 <li>AAA</li>
73 73 <li>AAA</li>
74 74 </ul>
75 75 </div>
76 76 </body>
77 77 </html>
78

View Code

文字滚动

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             *{
 9                 padding: 0;
10                 margin: 0;
11                 color: #990000;
12                 font-family: "微软雅黑";
13                 font-weight: bold;
14             }
15             div{
16                 position: relative;
17                 width:600px;
18                 height: 35px;
19                 line-height: 35px;
20                 margin: 30px auto;
21                 overflow: hidden;
22                 border: 2px solid #990000;
23                 
24             }
25             p{
26                 width: 10000px;
27                 position: absolute;
28                 animation: demo 20s linear infinite;
29             }
30             @keyframes demo{
31                 from{left:600px;}
32                 to{left: -1800px;}
33             }
34             p:hover{
35                 animation-play-state: paused;
36             }
37         </style>
38     </head>
39 
40     <body>
41         <div>
42             <p>人的一生，总是难免有浮沉。不会永远如旭日东升，也不会永远痛苦潦倒。反复地一浮一沉，对于一个人来说，正是磨练。因此，浮在上面的，的，不必骄傲;沉在底下的，更用不着悲观。必须以率直、谦虚的态度，乐观进取、向前迈进。 —— 松下幸之助</p>
43         </div>
44     </body>
45 
46 </html>

View Code