css3 transform,translate,animation

transform

div {
    transform : rotate(50deg);// 旋转
    transform : translate( 20px,50px)//元素向下移动 20px ,右边移动50px;
    transform : scale(2,4);// width： 扩大2倍，height： 扩大 4 倍
    
}

复制代码

transition

过渡

div{
    transition: width 2s;
    -ms - transition : width 2s;  // -IE9
    -o - transition :width 2s ;//opera
    -moz-transition: width 2s;// firefox
    -webkit - transition : width 2s ;//Chrom Safari
}
复制代码

animation

div{
    animation: 锁定选择器（myAdd） （动画时间） （速度） （循环次数）
    
}

//速度： linear 匀速
// 循环次数：infinite 

@keyframes myAdd{
    from  {color: red};
    to  {color : blue}
}
或者
@keyframes myAdd{
    0% {};
    20%{}
    40%{}
    60%{}
    80%{}
    100%{}
    
}
复制代码

transition 和 animation 的区别： transition 是效果的过渡，经过事件的触发，而后是从一个状态转换到另外一个状态，只有开始和结束 animation 是动画，是有中间的过渡的 如何让animation 停留在最后一帧： animation - fill -mode :forwards 开始以前使用初始值： backwords