transition、translate、transform、animation的区别

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/qq_22755565/article/details/78603095

transition／translate／transform／animation

因为自己刚开始接触css3动画时由于没有仔细看过文档，经常将这几个“属性“混淆（如果完全不存在这个问题可以忽略）
1、首先要明确的是transition、transform、animation这三个都是css属性，而translate是2D转换的一种方法是transform的一个属性值
2、transform是2D、3D变换的属性，只是因为他经常与transition同时使用导致直观上认为动画（过渡）就是transform，但其实transform是动画（过渡）可用的一种属性就像height、opacity一样（值得注意的是动画中之所以常用transform而不直接使用height，是因为使用transform不会引起页面的重排，可以提高性能）
3、transition、animation才是在动画（过渡）中必备的两个属性

animation和transition的区别

1、transition更适用于简单状态的过渡
2、animation可以没有触发条件但是transition不可以，所以在例如页面刚加载时的动画可以使用animation
3、animation可以通过更多的参数实现更复杂的动画效果，包括关键帧数、速度曲线、播放的次数、是否逆向播放等，（官方介绍中animation是transition属性的扩展）

/* animation-test */
@keyframes myfirst
{
    from {background: green;}
    to {background: yellow;}
}
.animation-test{
    width: 200px;
    height: 200px;
    background: green;
}
.animation-test:hover{
    animation: myfirst 1s;
}
/* transition-test */
.transition-test {
    width: 200px;
    height: 200px;
    background: green;
    transition: background 1s;
}
.transition-test:hover {
    background: yellow;
}