css3动画

transform变换
transform: translate(30px,30px);    //相对当前位置进行移动
transform: rotate(30deg);    //旋转指定角度
transform: rotateX(30deg);    //围绕x轴进行旋转，X可替换为Y,Z
transfrom: scale(3,3);    //按参数缩放长宽，为负数时上下颠倒

transform: skew(30deg,30deg);    //对图像进行斜切

transform-origin:center center  -50px; //旋转原点

transform-style:perserve-3d; //子元素显示3d效果

backfaceVisibility:hidden; //当元素旋转至背面时不显示

perspective:100px; //定义观察元素的距离，增加立体感。

transition过渡效果
transition: width 2s ease 1s;    //四个参数，前两个必须
    ①transition-property:width   //指定会变换的元素
    ②transition-duration:    //变换时间
    ③transition-timing-funciton:    //时间变化曲线，默认linear
        linear:线性    ease:由慢到快再到慢     ease-in：慢开始    ease-in-out:慢结束
    ④transition-delay:    //效果延迟


@Keyframes动画
Keyframe定义
@Keyframes  kname{   
    from {css样式}
    to {css样式}
}
@keyframes kname
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
Keyframe使用：
div{
    animate: kname 5s;
}
详细参数：animation-name//动画名  animation-duration//动画持续时间  animation-timing-function//动画时间速度曲线，同transition
          animation-delay//延迟时间   animation-iteration-count//播放次数
          animation-direction//{  normal|reverse|alternate|alternate-reverse|initial|inherit   }
reverse:反向播放  alternate//奇数次正向播放，偶数反向播放   alternate-reverse//相反
 animation-play-state: paused|running  //控制暂停播放