keyframes transform詳解與例項

@keyframes動畫是迴圈的，而transform只執行一遍.

css3中新增的新屬性animation是用來為元素實現動畫效果的，但是animation無法單獨擔當起實現動畫的效果。承載動畫的另乙個屬性——@keyframes。使用的時候為了相容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等字首以適應不同的瀏覽器。

@keyframes animationname }

值

描述animationname

必需。定義動畫的名稱。

keyframes-selector

必需。定義動畫的名稱。

合法的值：

1. 0-100%

2. from（與 0% 相同）

3. to（與 100% 相同）

css-styles

必需。乙個或多個合法的 css 樣式屬性。

名字為gif的@keyframes，動畫完成需要的總時長為1.4s,剛開始的時候旋轉為0度，動畫完成的時候旋轉360度

.load-border
@keyframes gif 
100% 
}

名字為mymove的@keyframes，動畫完成需要的總時長為1s,剛開始的時候距頂部距離為0px，0.25s後距頂部距離為200px，0.5s後距頂部的距離為100px，以此類推

.img @keyframes mymove 25% 50% 75% 100%

}

在乙個動畫中改變多個 css 樣式：

@keyframes mymove
100% 
}

transform的含義是：改變，使…變形；轉換。

transform的屬性包括：rotate()（旋轉） /skew()（傾斜） /scale()（比例） /translate()（位移），分別還有x、y之分，比如：rotatex()和rotatey()，以此類推。

transform: rotate(10deg);

transform: skew(20deg);

transform: scale(1.5);

transform: translate(120px,0);

transform
:rotate(360deg)
skew(-20deg) scale(3.0) translate(100px,0);