transform2d转换、transition过渡、animation动画效果、@keyframes定义动画关键帧

transform:translate( 0 ,  0 );
-ms-transform:translate( 0 ,  0 );  /* IE 9 */
-webkit-transform:translate( 0 ,  0 );  /* Safari and Chrome */ 

// 定义 2D 转换。

{
    transition-property: width;  // 规定应用过渡的 CSS 属性的名称。(可以直接使用all作用全部属性)
    transition-duration: 1s;  // 定义过渡效果花费的时间。默认是 0。
    transition-timing-function: linear;  // 规定过渡效果的时间曲线。默认是 "ease"。
    transition-delay: 0.1s;  // 规定过渡效果何时开始。默认是 0。
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:0.1s;
}

// 过渡效果

@keyframes 'mymove'
{
    0%{opacity: 0;}　　　/*动画开始时的状态，完全透明*/
    100%{opacity: 1;}　　/*动画结束时的状态，完全不透明*/
}

@keyframes 'mymove'
{
    from{opacity: 0;}　　　/*动画开始时的状态，完全透明*/
    to{opacity: 1;}　　　　/*动画结束时的状态，完全不透明*/
}

@keyframes 'mymove'
{
    from，to{opacity: 0;}　　/*动画开始和结束时的状态，完全透明*/
    20%，80%{opacity: 1;}　/*动画的中间状态，完全不透明*/
}

// 动画定义关键帧

animation:mymove 5s infinite linear;
-webkit-animation:mymove 5s infinite linear; /* Safari and Chrome */
//  mymove 是动画名称、 5s表示这个动画一次播放5秒、infinite 表示播放的次数为无限次、linear代表在这5秒中动画是匀速播放的；

// animation动画效果