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

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

 // 定义 2D 转换。

 

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

transform: scale(2,2) // 宽度和高度扩大原来的2倍。

transform: scale(1.05)  // 宽度和高度扩大原来的1.05倍。配合hover使用动画效果。 

 

{
    transition-property: width;  // 规定应用过渡的 CSS 属性的名称。(可以直接使用all作用全部属性)
    transition-duration: 1s;  // 定义过渡效果花费的时间。默认是 0。
    transition-timing-function: linear;  // 规定过渡效果的时间曲线。默认是 "ease"。 linear(以均匀的速度变化)、ease(慢>快>慢)、ease-in（慢速开始）、ease-out(慢速结束)、ease-in-out(慢速开始和结束)
    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动画效果