搞清animation/transtion/transform/translate

css3動畫

animation

使用css3動畫須要2步

1. 爲指定元素添加animation屬性及屬性值。各瀏覽器私有屬性在前，通用屬性在最後。
2. 使用@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

transition

1. ie9及如下不支持。

2. 各瀏覽器私有屬性在前，通用屬性在最後。

   // 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></div>
   // js
   $('div').on('click', function () {

   $('div').addClass('w')

   })

功能

• 若觸發動畫事件後在動畫未結束前中止事件會放棄當前動畫今後時的狀態開始執行中止事件的動畫。

屬性

• transition-property 設置過渡動畫的css屬性名稱。
• transition-duration 完成過渡動畫的時長。
• transition-time-function 過渡動畫的速度曲線。
• transition-delay 過渡動畫的延遲時間。

transition與animation的區別在於前者只作過渡效果，後者着重作動畫效果。若實在分不清就把transition記爲過渡。過渡是直線型的，不能夠拆線。animation記爲動畫。動畫是能夠作不少拆線型的。

transform

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