CSS Animation 属性
时间：2016-08-16 07:03:12
收藏：0
阅读：11173
一、animation是CSS3中新增的属性，它可以制作出多种酷炫的动画效果，如果对flash有一定的了解，那这个属性就会很容易学习。
先展示一下简单的动画效果
__ __
O
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">__ __<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>
The end.
by Little
评论（0）