CSS Animation 属性

一、animation是CSS3中新增的属性，它可以制作出多种酷炫的动画效果，如果对flash有一定的了解，那这个属性就会很容易学习。

先展示一下简单的动画效果

__ __
O

二、下面就来了解一下animation的具体属性。

　　1.动画名称

1             /*1.name：动画名称*/
2             /*-webkit-animation-name: kf_play;*/
3             /*-moz-animation-name: kf_play;*/
4             /*-o-animation-name: kf_play;*/
5             /*animation-name: kf_play;*/

　　2.动画的持续时间，即播放一次动画所需的时间

1             /*2.duration：动画持续时间*/
2             /*-webkit-animation-duration: 2s;*/
3             /*-moz-animation-duration: 2s;*/
4             /*-o-animation-duration: 2s;*/
5             /*animation-duration: 2s;*/

　　3.动画播放速率曲线，这个属性与transition的一样。

1             /*3.animation-timing-function：动画播放速率曲线*/
2             /*-webkit-animation-timing-function: linear;*/
3             /*-moz-animation-timing-function: linear;*/
4             /*-o-animation-timing-function: linear;*/
5             /*animation-timing-function: linear;*/
6             /*其他可选值：ease | linear | ease-in | ease-out | ease-in-out*/

　　4.动画延迟时间

1             /*4.delay：动画延迟*/
2             /*-webkit-animation-delay: 0s;*/
3             /*-moz-animation-delay: 0s;*/
4             /*-o-animation-delay: 0s;*/
5             /*animation-delay: 0s;*/

　　5.动画的播放次数

1             /*5.animation-iteration-count：动画播放次数*/
2             /*-webkit-animation-iteration-count: 1;*/
3             /*-moz-animation-iteration-count: 1;*/
4             /*-o-animation-iteration-count: 1;*/
5             /*animation-iteration-count: 1;*/
6             /*其他可选值：infinite（无限次）*/

　　6.动画播放是否反向

1             /*6.animation-direction：动画时间轴的播放方向*/
2             /*-webkit-animation-direction: normal;*/
3             /*-moz-animation-direction: normal;*/
4             /*-o-animation-direction: normal;*/
5             /*animation-direction: normal;*/
6             /*其他可选值：normal（普通） | reverse（反向） | alternate（先正向，后反向） | alternate-reverse（先反向，后正向）*/

normal

reverse

alternate

alternate-reverse

　　7.动画播放完之后，画面定格在哪一帧。

1             /*7.animation-fill-mode：动画播放完毕后，动画定格的动画帧*/
2             /*-webkit-animation-fill-mode: none;*/
3             /*-moz-animation-fill-mode: none;*/
4             /*-o-animation-fill-mode: none;*/
5             /*animation-fill-mode: none;*/
6             /*其他可选值： none（无） | forwards（结束帧） | backwards（开始帧） | both（开始帧或结束帧）*/

　　8.动画播放的状态（暂停/播放）。

1             /*8.animation-play-state：动画的播放状态*/
2             /*-webkit-animation-play-state: running | paused;*/
3             /*-moz-animation-play-state: running | paused;*/
4             /*-o-animation-play-state: running | paused;*/
5             /*animation-play-state: running | paused;*/

移入鼠标

三、@keyframes。

　　 animation不能单独使用，必须配合@keyframes｛｝。然后使用animation-name关联起来。

 1 <style>
 2     .play-box{
 3             animation-name: kf_play;
 4         }
 5 
 6     @keyframes kf_play {
 7             0% {
 8                 width: 100px;
 9             }
10             100% {
11                 width: 300px;
12             }
13         }
14 </style>

　　@keyframe 的语法。

　　1.可以使用关键词“form”和“to”来表示动画从开始到结束的关键帧。

　　2.还可以使用%定义多个关键帧的样式（而%的基值是动画播放时间：animation-duration）：

 1 @keyframes kf_play {
 2             0% {
 3                 width: 100px;
 4             }
 5             10% {
 6                 width: 200px;
 7             }
 8             50% {
 9                 width: 300px;
10             }
11             80% {
12                 width: 400px;
13             }
14             100% {
15                 width: 500px;
16             }
17         }

四、最后贴上所有动画的代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>title</title>
  6     <style>
  7         .play-box {
  8             width: 200px;
  9             height: 20px;
 10             margin: 5px auto;
 11             background-color: #00ccff;
 12             border: 1px solid #000;
 13             -webkit-animation: kf_play 3s ease infinite alternate;
 14             -o-animation: kf_play 3s ease infinite alternate;
 15             animation: kf_play 3s ease infinite alternate;
 16 
 17             /*--------animation attribute--------*/
 18 
 19             /*1.name：动画名称*/
 20             /*-webkit-animation-name: kf_play;*/
 21             /*-moz-animation-name: kf_play;*/
 22             /*-o-animation-name: kf_play;*/
 23             /*animation-name: kf_play;*/
 24 
 25             /*2.duration：动画持续时间*/
 26             /*-webkit-animation-duration: 2s;*/
 27             /*-moz-animation-duration: 2s;*/
 28             /*-o-animation-duration: 2s;*/
 29             /*animation-duration: 2s;*/
 30 
 31             /*3.animation-timing-function：动画播放速率曲线*/
 32             /*-webkit-animation-timing-function: linear;*/
 33             /*-moz-animation-timing-function: linear;*/
 34             /*-o-animation-timing-function: linear;*/
 35             /*animation-timing-function: linear;*/
 36             /*其他可选值：ease | linear | ease-in | ease-out | ease-in-out*/
 37 
 38             /*4.delay：动画延迟*/
 39             /*-webkit-animation-delay: 0s;*/
 40             /*-moz-animation-delay: 0s;*/
 41             /*-o-animation-delay: 0s;*/
 42             /*animation-delay: 0s;*/
 43 
 44             /*5.animation-iteration-count：动画播放次数*/
 45             /*-webkit-animation-iteration-count: 1;*/
 46             /*-moz-animation-iteration-count: 1;*/
 47             /*-o-animation-iteration-count: 1;*/
 48             /*animation-iteration-count: 1;*/
 49             /*其他可选值：infinite（无限次）*/
 50 
 51             /*6.animation-direction：动画时间轴的播放方向*/
 52             /*-webkit-animation-direction: normal;*/
 53             /*-moz-animation-direction: normal;*/
 54             /*-o-animation-direction: normal;*/
 55             /*animation-direction: normal;*/
 56             /*其他可选值：normal（普通） | reverse（反向） | alternate（先正向，后反向） | alternate-reverse（先反向，后正向）*/
 57 
 58             /*7.animation-fill-mode：动画播放完毕后，动画定格的动画帧*/
 59             /*-webkit-animation-fill-mode: none;*/
 60             /*-moz-animation-fill-mode: none;*/
 61             /*-o-animation-fill-mode: none;*/
 62             /*animation-fill-mode: none;*/
 63             /*其他可选值： none（无） | forwards（结束帧） | backwards（开始帧） | both（开始帧或结束帧）*/
 64 
 65             /*8.animation-play-state：动画的播放状态*/
 66             /*-webkit-animation-play-state: running | paused;*/
 67             /*-moz-animation-play-state: running | paused;*/
 68             /*-o-animation-play-state: running | paused;*/
 69             /*animation-play-state: running | paused;*/
 70 
 71             /*--------animation attribute  end--------*/
 72         }
 73 
 74         .box_01 {
 75             -webkit-animation-delay: 0s;
 76             -moz-animation-delay: 0s;
 77             -o-animation-delay: 0s;
 78             animation-delay: 0s;
 79         }
 80 
 81         .box_02 {
 82             -webkit-animation-delay: 0.5s;
 83             -moz-animation-delay: 0.5s;
 84             -o-animation-delay: 0.5s;
 85             animation-delay: 0.5s;
 86         }
 87 
 88         .box_03 {
 89             -webkit-animation-delay: 1s;
 90             -moz-animation-delay: 1s;
 91             -o-animation-delay: 1s;
 92             animation-delay: 1s;
 93         }
 94 
 95         .box_04 {
 96             -webkit-animation-delay: 1.5s;
 97             -moz-animation-delay: 1.5s;
 98             -o-animation-delay: 1.5s;
 99             animation-delay: 1.5s;
100         }
101 
102         .box_05 {
103             -webkit-animation-delay: 2s;
104             -moz-animation-delay: 2s;
105             -o-animation-delay: 2s;
106             animation-delay: 2s;
107         }
108 
109         .box_06 {
110             -webkit-animation-delay: 2.5s;
111             -moz-animation-delay: 2.5s;
112             -o-animation-delay: 2.5s;
113             animation-delay: 2.5s;
114         }
115 
116         .box_07 {
117             -webkit-animation-delay: 3s;
118             -moz-animation-delay: 3s;
119             -o-animation-delay: 3s;
120             animation-delay: 3s;
121         }
122 
123         .box_08 {
124             -webkit-animation-delay: 3.5s;
125             -moz-animation-delay: 3.5s;
126             -o-animation-delay: 3.5s;
127             animation-delay: 3.5s;
128         }
129 
130         .box_09 {
131             -webkit-animation-delay: 4s;
132             -moz-animation-delay: 4s;
133             -o-animation-delay: 4s;
134             animation-delay: 4s;
135         }
136 
137         .box_10 {
138             -webkit-animation-delay: 4.5s;
139             -moz-animation-delay: 4.5s;
140             -o-animation-delay: 4.5s;
141             animation-delay: 4.5s;
142         }
143 
144         .box_11 {
145             -webkit-animation-delay: 5s;
146             -moz-animation-delay: 5s;
147             -o-animation-delay: 5s;
148             animation-delay: 5s;
149         }
150 
151         .box_12 {
152             -webkit-animation-delay: 5.5s;
153             -moz-animation-delay: 5.5s;
154             -o-animation-delay: 5.5s;
155             animation-delay: 5.5s;
156         }
157 
158         @keyframes kf_play {
159             0% {
160                 width: 200px;
161             }
162             100% {
163                 width: 500px;
164             }
165         }
166 
167         @-webkit-keyframes kf_play {
168             0% {
169                 width: 200px;
170             }
171             100% {
172                 width: 500px;
173             }
174         }
175 
176         @-moz-keyframes kf_play {
177             0% {
178                 width: 200px;
179             }
180             100% {
181                 width: 500px;
182             }
183         }
184 
185         @-ms-keyframes kf_play {
186             0% {
187                 width: 200px;
188             }
189             100% {
190                 width: 500px;
191             }
192         }
193 
194         @-o-keyframes kf_play {
195             0% {
196                 width: 200px;
197             }
198             100% {
199                 width: 500px;
200             }
201         }
202 
203         .face {
204             position: relative;
205             top: 0;
206             left: -314px;
207             margin: 20px auto;
208             width: 100px;
209             height: 100px;
210             background-color: #ffde90;
211             border: 1px solid #000;
212             border-radius: 50px;
213             font-size: 32px;
214             line-height: 45px;
215             text-align: center;
216             -webkit-animation: kf_face 4s ease-in-out alternate infinite;
217             -o-animation: kf_face 4s ease-in-out alternate infinite;
218             animation: kf_face 4s ease-in-out alternate infinite;
219         }
220 
221         @keyframes kf_face {
222             0% {
223                 left: -314px;
224                 -webkit-transform: rotate(-1turn);
225                 -moz-transform: rotate(-1turn);
226                 -ms-transform: rotate(-1turn);
227                 -o-transform: rotate(-1turn);
228                 transform: rotate(-1turn);
229             }
230             100% {
231                 left: 314px;
232                 -webkit-transform: rotate(1turn);
233                 -moz-transform: rotate(1turn);
234                 -ms-transform: rotate(1turn);
235                 -o-transform: rotate(1turn);
236                 transform: rotate(1turn);
237             }
238         }
239 
240         @-webkit-keyframes kf_face {
241             0% {
242                 left: -314px;
243                 -webkit-transform: rotate(-1turn);
244                 -moz-transform: rotate(-1turn);
245                 -ms-transform: rotate(-1turn);
246                 -o-transform: rotate(-1turn);
247                 transform: rotate(-1turn);
248             }
249             100% {
250                 left: 314px;
251                 -webkit-transform: rotate(1turn);
252                 -moz-transform: rotate(1turn);
253                 -ms-transform: rotate(1turn);
254                 -o-transform: rotate(1turn);
255                 transform: rotate(1turn);
256             }
257         }
258 
259         @-moz-keyframes kf_face {
260             0% {
261                 left: -314px;
262                 -webkit-transform: rotate(-1turn);
263                 -moz-transform: rotate(-1turn);
264                 -ms-transform: rotate(-1turn);
265                 -o-transform: rotate(-1turn);
266                 transform: rotate(-1turn);
267             }
268             100% {
269                 left: 314px;
270                 -webkit-transform: rotate(1turn);
271                 -moz-transform: rotate(1turn);
272                 -ms-transform: rotate(1turn);
273                 -o-transform: rotate(1turn);
274                 transform: rotate(1turn);
275             }
276         }
277 
278         @-ms-keyframes kf_face {
279             0% {
280                 left: -314px;
281                 -webkit-transform: rotate(-1turn);
282                 -moz-transform: rotate(-1turn);
283                 -ms-transform: rotate(-1turn);
284                 -o-transform: rotate(-1turn);
285                 transform: rotate(-1turn);
286             }
287             100% {
288                 left: 314px;
289                 -webkit-transform: rotate(1turn);
290                 -moz-transform: rotate(1turn);
291                 -ms-transform: rotate(1turn);
292                 -o-transform: rotate(1turn);
293                 transform: rotate(1turn);
294             }
295         }
296 
297         @-o-keyframes kf_face {
298             0% {
299                 left: -314px;
300                 -webkit-transform: rotate(-1turn);
301                 -moz-transform: rotate(-1turn);
302                 -ms-transform: rotate(-1turn);
303                 -o-transform: rotate(-1turn);
304                 transform: rotate(-1turn);
305             }
306             100% {
307                 left: 314px;
308                 -webkit-transform: rotate(1turn);
309                 -moz-transform: rotate(1turn);
310                 -ms-transform: rotate(1turn);
311                 -o-transform: rotate(1turn);
312                 transform: rotate(1turn);
313             }
314         }
315 
316         .direction {
317             position: relative;
318             left: 0;
319             width: 200px;
320             height: 20px;
321             margin: 10px 0;
322             background-color: #00ccff;
323             border: 1px solid #000;
324             font-size: 16px;
325             line-height: 20px;
326             text-align: center;
327             -webkit-animation: kf_direction;
328             -o-animation: kf_direction;
329             animation: kf_direction 5s ease-in-out infinite;
330         }
331 
332         .reverse {
333             -webkit-animation-direction: reverse;
334             -moz-animation-direction: reverse;
335             -o-animation-direction: reverse;
336             animation-direction: reverse;
337         }
338 
339         .alternate {
340             -webkit-animation-direction: alternate;
341             -moz-animation-direction: alternate;
342             -o-animation-direction: alternate;
343             animation-direction: alternate;
344         }
345 
346         .alternate-reverse {
347             -webkit-animation-direction: alternate-reverse;
348             -moz-animation-direction: alternate-reverse;
349             -o-animation-direction: alternate-reverse;
350             animation-direction: alternate-reverse;
351         }
352 
353         @keyframes kf_direction {
354             0% {
355                 left: 0;
356             }
357             100% {
358                 left: 500px;
359             }
360         }
361 
362         @-webkit-keyframes kf_direction {
363             0% {
364                 left: 0;
365             }
366             100% {
367                 left: 500px;
368             }
369         }
370 
371         @-moz-keyframes kf_direction {
372             0% {
373                 left: 0;
374             }
375             100% {
376                 left: 500px;
377             }
378         }
379 
380         @-ms-keyframes kf_direction {
381             0% {
382                 left: 0;
383             }
384             100% {
385                 left: 500px;
386             }
387         }
388 
389         @-o-keyframes kf_direction {
390             0% {
391                 left: 0;
392             }
393             100% {
394                 left: 500px;
395             }
396         }
397 
398         .state {
399             position: relative;
400             left: 0;
401             width: 100px;
402             height: 50px;
403             background-color: #00ccff;
404             border: 1px solid #000;
405             font-size: 18px;
406             line-height: 50px;
407             text-align: center;
408             -webkit-animation: kf_state 3s ease-in-out infinite alternate;
409             -o-animation: kf_state 3s ease-in-out infinite alternate;
410             animation: kf_state 3s ease-in-out infinite alternate;
411         }
412 
413         .state:hover {
414             -webkit-animation-play-state: paused;
415             -moz-animation-play-state: paused;
416             -o-animation-play-state: paused;
417             animation-play-state: paused;
418         }
419 
420         @keyframes kf_state {
421             0% {
422                 left: 0;
423             }
424             100% {
425                 left: 500px;
426             }
427         }
428 
429         @-webkit-keyframes kf_state {
430             0% {
431                 left: 0;
432             }
433             100% {
434                 left: 500px;
435             }
436         }
437 
438         @-moz-keyframes kf_state {
439             0% {
440                 left: 0;
441             }
442             100% {
443                 left: 500px;
444             }
445         }
446 
447         @-ms-keyframes kf_state {
448             0% {
449                 left: 0;
450             }
451             100% {
452                 left: 500px;
453             }
454         }
455 
456         @-o-keyframes kf_state {
457             0% {
458                 left: 0;
459             }
460             100% {
461                 left: 500px;
462             }
463         }
464     </style>
465 </head>
466 <body>
467 <p class="play-box box_01"></p>
468 <p class="play-box box_02"></p>
469 <p class="play-box box_03"></p>
470 <p class="play-box box_04"></p>
471 <p class="play-box box_05"></p>
472 <p class="play-box box_06"></p>
473 <p class="play-box box_07"></p>
474 <p class="play-box box_08"></p>
475 <p class="play-box box_09"></p>
476 <p class="play-box box_10"></p>
477 <p class="play-box box_11"></p>
478 <p class="play-box box_12"></p>
479 <div class="face">__&emsp;__<br>O</div>
480 <div class="direction">normal</div>
481 <div class="direction reverse">reverse</div>
482 <div class="direction alternate">alternate</div>
483 <div class="direction alternate-reverse">alternate-reverse</div>
484 <div class="state">移入鼠标</div>
485 </body>
486 </html>

HTML 文档

The end.

by Little

posted @ 2016-08-16 03:24 LittleD 阅读(1752) 评论(0) 编辑收藏举报

LittleD

CSS Animation 属性

一、animation是CSS3中新增的属性，它可以制作出多种酷炫的动画效果，如果对flash有一定的了解，那这个属性就会很容易学习。

二、下面就来了解一下animation的具体属性。

三、@keyframes。

四、最后贴上所有动画的代码：

公告