摘要：規(guī)則內(nèi)指定一個(gè)樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式。功能若觸發(fā)動(dòng)畫事件后在動(dòng)畫未結(jié)束前停止事件會(huì)放棄當(dāng)前動(dòng)畫從此時(shí)的狀態(tài)開(kāi)始執(zhí)行停止事件的動(dòng)畫。

使用css3動(dòng)畫需要2步

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

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

animation定義動(dòng)畫的屬性值。
@keyframes規(guī)則內(nèi)指定一個(gè)CSS樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式。

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;}
}

功能

可以改變?nèi)我舛嗟臉邮剑我舛嗟拇螖?shù)。

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

最好使用0% 100%（對(duì)瀏覽器好）

屬性

@keyframes 規(guī)定動(dòng)畫

animation 簡(jiǎn)寫屬性 name duration timing-function delay iteration-count direction fill-mode play-state

animation-name 規(guī)定@keyframes的名稱

animation-duration

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

animation-delay

animation-iteration-count 動(dòng)畫重復(fù)播放的次數(shù)

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

animation-fill-mode 動(dòng)畫不播放時(shí)的樣式

animation-play-state 定義動(dòng)畫是否運(yùn)行或停止 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")

})

功能

若觸發(fā)動(dòng)畫事件后在動(dòng)畫未結(jié)束前停止事件會(huì)放棄當(dāng)前動(dòng)畫從此時(shí)的狀態(tài)開(kāi)始執(zhí)行停止事件的動(dòng)畫。

屬性

transition-property 設(shè)置過(guò)渡動(dòng)畫的css屬性名稱。

transition-duration 完成過(guò)渡動(dòng)畫的時(shí)長(zhǎng)。

transition-time-function 過(guò)渡動(dòng)畫的速度曲線。

transition-delay 過(guò)渡動(dòng)畫的延遲時(shí)間。

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

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移動(dòng)

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

translateX(x)

translateY(y)

translateZ(z)

scale(x, y) 2d縮放

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

scaleX(x)

scaleY(y)

scaleZ(z)

rotate(a) 2d旋轉(zhuǎn)

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

rotateX(a)

rotateY(a)

rotateZ(a)

skew(xa, ya) 2d傾斜

skewX(a)

skewY(a)

perspective(n) 3d透視視圖

|transform-origin|變形時(shí)的原點(diǎn)位置|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|嵌套元素是怎樣在三維空間中呈現(xiàn)的|flat 二維| preserve-3d 三維|

transform是變換（若不理解變換就理解為變形）。translate是移動(dòng)。是transform的一種屬性值。沒(méi)有動(dòng)畫。transition是過(guò)渡。有動(dòng)畫。

2018/02/12 by stone