摘要：規則內指定一個樣式和動畫將逐步從目前的樣式更改為新的樣式。功能若觸發動畫事件后在動畫未結束前停止事件會放棄當前動畫從此時的狀態開始執行停止事件的動畫。

使用css3動畫需要2步

為指定元素添加animation屬性及屬性值。各瀏覽器私有屬性在前，通用屬性在最后。

使用@keyframes定義動畫過程名稱。各瀏覽器私有屬性在前，通用屬性在最后。

animation定義動畫的屬性值。
@keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。

div
{
    -webkit-animation: myfirst 5s; /* Safari Chrome opera */
    -ms-animation: myfirst 5s; /* ie */
    -moz-animation: myfirst 5s; /* ff */
    animation: myfirst 5s;
}
 
@-webkit-keyframes myfirst /* Safari Chrome opera */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
@-ms-keyframes myfirst /* ie */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
@-moz-keyframes myfirst /* ff */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

功能

可以改變任意多的樣式，任意多的次數。

使用from,to等同于0%，100%

最好使用0% 100%（對瀏覽器好）

屬性

@keyframes 規定動畫

animation 簡寫屬性 name duration timing-function delay iteration-count direction fill-mode play-state

animation-name 規定@keyframes的名稱

animation-duration

animation-timing-function linear|ease|ease-in|ease-out|cubic-bezier

animation-delay

animation-iteration-count 動畫重復播放的次數

animation-direction 定義動畫在下一周期是否逆向播放 normal|reverse|alternate|alternate-reverse|initial|inherit

animation-fill-mode 動畫不播放時的樣式

animation-play-state 定義動畫是否運行或停止 paused|runing

ie9及以下不支持。

各瀏覽器私有屬性在前，通用屬性在最后。

// css
div {

-webkit-transition: width 2s; /* safari chrome */
-moz-transition: width 2s; /* ff */
-o-transition: width 2s; /* opera */
transition: width 2s;
width: 200px;
height: 200px;

}
.w {

width: 300px;

}
// html

$("div").addClass("w")

})

功能

若觸發動畫事件后在動畫未結束前停止事件會放棄當前動畫從此時的狀態開始執行停止事件的動畫。

屬性

transition-property 設置過渡動畫的css屬性名稱。

transition-duration 完成過渡動畫的時長。

transition-time-function 過渡動畫的速度曲線。

transition-delay 過渡動畫的延遲時間。

transition與animation的區別在于前者只做過渡效果，后者著重做動畫效果。若實在分不清就把transition記為過渡。過渡是直線型的，不可以拆線。animation記為動畫。動畫是可以做很多拆線型的。

div {
    -ms-transform: rotate(30deg); /* ie */
    -webkit-s-transform: rotate(30deg); /* safari chrome opera */
    -moz-s-transform: rotate(30deg); /* ff */
    transform: rotate(30deg);
}

功能

給指定元素變換。

屬性

none

matrix(n, n, n, n, n, n)

translate(x, y) 2d移動

translate3d(x, y, z) 3d移動

translateX(x)

translateY(y)

translateZ(z)

scale(x, y) 2d縮放

scale3d(x, y, z) 3d縮放

scaleX(x)

scaleY(y)

scaleZ(z)

rotate(a) 2d旋轉

rotate3d(x, y, z, a) 3d 旋轉

rotateX(a)

rotateY(a)

rotateZ(a)

skew(xa, ya) 2d傾斜

skewX(a)

skewY(a)

perspective(n) 3d透視視圖

|transform-origin|變形時的原點位置|center center|x-axis y-axis z-axis; // top left right bottom x% xpx|
|transform-box|定義排版盒子|border-box|fill-box, view-box, inherit, initial, unset|
|transform-type|嵌套元素是怎樣在三維空間中呈現的|flat 二維| preserve-3d 三維|

transform是變換（若不理解變換就理解為變形）。translate是移動。是transform的一種屬性值。沒有動畫。transition是過渡。有動畫。

2018/02/12 by stone