Css3中的動畫屬性是什么

這篇文章主要為大家展示了“Css3中的動畫屬性是什么”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Css3中的動畫屬性是什么”這篇文章吧。

animation-name：動畫名稱，必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義，如果提供多個屬性值用逗號隔開。

@keyframes相當于一個命名空間，后面跟一個名詞，如果在class中的animation-name定義了與之對應的name就可以執行動畫。定義動畫時可直接使用關鍵字from和to，從一種狀態過度到另一種狀態。

CSS

.animation_name{

    left:0;

    top:100px;

    position: absolute;

    -webkit-animation: 0.5s 0.5s ease infinite alternate;

    -moz-animation: 0.5s 0.5s ease infinite alternate;

    -webkit-animation-name:demo;

    -moz-animation-name:demo;

}

@-webkit-keyframes demo{

    from{left:0;}

    to{left:400px;}

}

@-webkit-keyframes demo1{

    0%{left:0;}

    50%{left:200px;}

    100%{left:400px;}

}

.animation_name{

    left:0;

    top:100px;

    position: absolute;

    -webkit-animation: 0.5s 0.5s ease infinite alternate;

    -moz-animation: 0.5s 0.5s ease infinite alternate;

    -webkit-animation-name:demo;

    -moz-animation-name:demo;

}

@-webkit-keyframes demo{

    from{left:0;}

    to{left:400px;}

}

@-webkit-keyframes demo1{

    0%{left:0;}

    50%{left:200px;}

    100%{left:400px;}

}

animation-duration：動畫時間

animation-timing-function：播放方式，取值如下：

ease：緩解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函數，既立方貝塞爾。

linear：線性效果

ease-in：漸顯效果

ease-out：漸隱效果

ease-in-out：漸顯漸隱效果

step-start：馬上跳轉到動畫結束狀態

step-end：保持動畫開始狀態，到動畫執行時間結束，馬上跳轉到動畫結束狀態

step([,[start | end]]?)：第一個參數number為指定的間隔數，即把動畫分為n步階段性顯示，第二個參數默認為end，設置最后一步狀態，start為結束時的狀態，end為開始時的狀態，若設置與animation-fill-mode的效果沖突，以animation-fill-mode的設置為動畫結束狀態。

cubic-bezier(,,,)：特殊的立方賽貝爾曲線效果

animation-delay：開始播放時間

animation-iteration-count：播放次數，取值為infinite時表示無限循環播放

animation-direction：播放方向，取值為：

normal：正常方向

reverse：動畫反向運行，方向始終與normal相仿

alternate：動畫會循環正反交替運動

animation-fill-mode：播放后的狀態，取值：

none：默認值，不設置

forwards：結束后保持動畫結束的狀態

backwards：結束后返回動畫開始時狀態

both：結束后可遵循forwards和backwards兩個規則

animation-play-state：檢索或設置對象動畫的狀態，取值：

running：默認，運動

paused：暫停

四、關聯屬性

transform-origin：變形原點，transform的參照點，默認為元素的中心點。有兩個參數，參數一為橫坐標，參數二為縱坐標。

percentage：用百分比指定坐標值，可負

length：用長度指定坐標值，可負

left center right：水平方向取值

top center bottom：垂直方向取值

perspective-prigin：透視原點，定義在X軸和Y軸的3D元素，允許改變3D元素的底部位置，定義該屬性時，它是一個元素的子元素，透視圖，而不是元素本身。

注意：使用該屬性必須和perspective屬性一起用，只影響3D轉換的元素。

取值：percentage、length、left、center、right、top、center、bottom

backface-visibility：隱藏內容的背面，默認情況下背面可見，反轉后變換的內容仍然可見，當backface-visibility設置hidden時，旋轉后內容將隱藏，旋轉后正面將不再可見。

取值：visible、hidden

transform-style：3D呈現，設置內嵌的元素在3D空間如何呈現，有兩個值：

flat：所有子元素在2D平面呈現

preserve-3d：保留3D空間

以上是“Css3中的動畫屬性是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！