CSS3动画transform、transition和animation的区别

CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。

1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

div{
　　transform:scale(2);
}

transition和animation两者都能实现动画效果

transform常常配合transition和animation使用

2、transition样式过渡，从一种效果逐渐改变为另一种效果

transition是一个合写属性

transition:transition-property transition-duration transition-timing-function transition-delay

从左到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间

div{
    width：100px;
    height:100px;
    transition:transform 2s;
}
div：hover{
    transform:rotate(180deg);
}

transition通常和hover等事件配合使用，需要由事件来触发过渡

3、animation动画 由@keyframes来描述每一帧的样式

div{
　　animation:myAnimation 5s infinite
}
@keyframes myAnimation {
　　0%{left:0;transform:rotate(0);}
　　100%{left:200px;transform:rotate(180deg);}
}

区别：

（1）transform仅描述元素的静态样式，常常配合transition和animation使用

（2）transition通常和hover等事件配合使用，animation是自发的，立即播放

（3）animation可设置循环次数

（4）animation可设置每一帧的样式和时间，transition只能设置头尾

（5）transition可与js配合使用，js设定要变化的样式，transition负责动画效果，如：

/*css:*/
div{
    width:100px;
    height:100px;
    transition:all 1s;
}
//js
divEle.onclick = function(){
    divEle.style.width = "200px";
    divEle.style.height = "200px";
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_1622