transition, transform和animation的語法是什么

這篇文章主要介紹“transition, transform和animation的語法是什么”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“transition, transform和animation的語法是什么”文章能幫助大家解決問題。

　　transition

　　transition允許css的屬性值在一定的時間區間內平滑地過渡，語法如下：

　　transition：transition-propertytransition-durationtransition-timing-functiontransition-delay[,...]

　　transition的相關屬性：

　　transition-property：用來指定執行transition效果的屬性，可以為none,all或者特定的屬性。

　　transition-duration：動畫執行的持續時間，單位為s（秒）或者ms（毫秒）。

　　transition-timing-function：變換速率效果，可選值為ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier（自定義時間曲線）。

　　transition-delay：用來指定動畫開始執行的時間，取值同transition-duration，但是可以為負數。

　　transform

　　transform分為2D和3D，這里暫時只介紹比較常用的2Dtransform，其主要包含以下幾種變換：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix，語法如下：

　　transform:rotate|scale|skew|translate|matrix;

　　transform的相關屬性：

　　rotate旋轉

　　rotate的單位是deg度，正數表示順時針旋轉，負數表示逆時針旋轉。

　　scale縮放

　　scale的取值范圍是0~n，小于1時表示縮小，反之表示放大。例如scale(0.5,2)表示水平方向縮小1倍，垂直方向放大1倍，另外，也可以通過scaleX或者scaleY對一個方向進行設置。

　　skew扭曲

　　skew的單位跟rotate一樣都是deg度。例如skew(30deg,10deg)表示水平方向傾斜30度，垂直方向傾斜10度。

　　translate偏移

　　偏移同樣包括水平偏移和垂直偏移。translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動）。

　　animation

　　CSS3中的animation是通過一個叫Keyframes關鍵幀的玩意來控制的，他的命名是由"@keyframes"開頭，后面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。對于一個"@keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，語法如下：

　　@keyframesIDENT{

　　from{

　　Properties:Propertiesvalue;

　　}

　　Percentage{

　　Properties:Propertiesvalue;

　　}

　　to{

　　Properties:Propertiesvalue;

　　}

　　}

　　或者全部寫成百分比的形式：

　　@keyframesIDENT{

　　0%{

　　Properties:Propertiesvalue;

　　}

　　Percentage{

　　Properties:Propertiesvalue;

　　}

　　100%{

　　Properties:Propertiesvalue;

　　}

　　}

　　animation和transition一樣有自己相對應的屬性，那么在animation主要有以下幾種：animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面對其中的一些屬性進行解釋：

　　animation-name關鍵幀名：

　　用來定義一個動畫的名稱，也就是由前面的keyframes創建的動畫名，默認值為none，當值為none時，將沒有任何動畫效果。如果我們要同時附幾個animation給一個元素，只要用逗號,隔開即可。

　　animation-iteration-count動畫循環次數：

　　默認為1，如果要進行無限循環，只要設為infinite即可。

　　animation-direction動畫播放的方向：

　　其只有兩個值，默認值為normal，如果設置為normal時，動畫的每次循環都是向前播放；另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。

　　animation-play-state播放狀態：

　　其主要有兩個值，running和paused，其中running為默認值?？梢酝ㄟ^paused將正在播放的動畫停下了，也可以通過running將暫停的動畫重新播放。這個屬性不常用。

關于“transition, transform和animation的語法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。