什麼是Animation

Animation 指動畫效果

-webkit-/ -moz-/ -o-/ -ms-

.myani

.myani {
    width: 200px;
    height: 200px;
    color:#000;
    background-color: #fff;
    animation:  myani  1s  ease  2  alternate  1s  both ; /*簡寫動畫型式*/

    animation-name:  myani; /* 指定動畫名稱*/
    animation-duration: 1s;  /*  指定動畫時間*/
    animation-timing-function: ease; /* 指定動畫函數 快到慢*/ 
    animation-timing-function: linear;/* 指定動畫函數線性恆速*/     
    animation-timing-function: ease-in;/* 指定動畫函數慢到快的加速狀態*/    
    animation-timing-function: ease-out;/* 指定動畫函數愈來愈慢減速狀態*/   
    animation-timing-function: ease-in-out; /* 指定動畫函數先加速,後減速*/ 
    animation-timing-function: cubic-bezier (0.25, 0.65, 0.88, 0.25);/* 指定動畫函數*/

    animation-delay: 0s, 2s, 0s;  /* 指定動畫延遲*/
    animation-delay: 2s;/* 指定動畫延遲*/

    animation-iteration-count: 2;  /* 指定動畫次數循環2次*/ 

    animation-iteration-count: infinite;/*  指定動畫次數循環無限次*/ 

    animation-direction: alternate;   /* 指定動畫交替設定緩動方向交替*/

    animation-iteration-count: 3; /* ( 配合動畫次數 循環3次 )*/ 

    animation-direction: alternate;/* ( 配合動畫交替設定緩動方向交替 )  */ 
    animation-fill-mode: forwards; /*  指定返回與否 設定不返回*/
    animation-fill-mode: backforwards;  /* 指定返回與否返回到0*/
    animation-fill-mode: both; /*  指定返回與否視情況而定*/  

    animation: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;
}

.myani:hover

.myani:hover {
    animation-play-state: paused;    /*設定滑入後停止動畫*/
}