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