CSS3通過@keyframes建立動畫

本文主要和大家介紹了CSS3 @keyframes簡單動畫實現的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能協助到大家。

定義：

通過 @keyframes 規則，能夠建立動畫。

建立動畫的原理是，將一套 CSS 樣式逐漸層化為另一套樣式。

在動畫過程中，可以多次改變這套 CSS 樣式。

以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。

0% 是動畫的開始時間，100% 動畫的結束時間。

為了獲得最佳的瀏覽器支援，應始終定義 0% 和 100% 選取器。

重要：相容問題！@keyfrmes 不相容IE 9 and 以及更早版本的瀏覽器.

文法：

@keyframes animationname {keyframes-selector {css-styles;}}

animationname	必需。定義動畫的名稱。
keyframes-selector	必需。動畫時間長度的百分比。 合法的值： 0-100% from（與 0% 相同） to（與 100% 相同）
css-styles	必需。一個或多個合法的 CSS 樣式屬性。

@keyframes mymove{    0%   {top:0px;}    25%  {top:200px;}    75%  {top:50px}    100% {top:100px;}}@-webkit-keyframes mymove /* Safari and Chrome */{    0%   {top:0px;}    25%  {top:200px;}    75%  {top:50px}    100% {top:100px;}}//多個特性變化，用;隔開.@-webkit-keyframes mymove{0% {top:0px; left:0px; background:red;}25% {top:0px; left:100px; background:blue;}50% {top:100px; left:100px; background:yellow;}75% {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}

使用mymove動畫方法：

選取器

{    animation:mymove 5s infinite;    -webkit-animation:mymove 5s infinite; /* Safari and Chrome， infinite表示無限次迴圈，也可設定次數n：                                           animation-interation-count:n*/ }

總結：@keyframes與animation密切相關，如想透徹掌握，還需對照animation用法一起學習。