CSS3动画transform、transition和animation的区别
2021-01-17 14:12
标签：bsp 实现 cti har sla fun 过渡效果 translate duration transition和animation两者都能实现动画效果 transform常常配合transition和animation使用 transition是一个合写属性 transition:transition-property transition-duration transition-timing-function transition-delay 从左到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间 transition通常和hover等事件配合使用，需要由事件来触发过渡 资源网站大全 https://55wd.com 我的007办公资源网站 https://www.wode007.com （1）transform仅描述元素的静态样式，常常配合transition和animation使用 （2）transition通常和hover等事件配合使用，animation是自发的，立即播放 （3）animation可设置循环次数 （4）animation可设置每一帧的样式和时间，transition只能设置头尾 （5）transition可与js配合使用，js设定要变化的样式，transition负责动画效果，如： CSS3动画transform、transition和animation的区别 标签：bsp 实现 cti har sla fun 过渡效果 translate duration 原文地址：https://www.cnblogs.com/ypppt/p/13363747.htmlcss3属性中关于制作动画的三个属性：Transform,Transition,Animation。
1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
div{
transform:scale(2);
}
2、transition样式过渡，从一种效果逐渐改变为另一种效果
div{
width：100px;
height:100px;
transition:transform 2s;
}
div：hover{
transform:rotate(180deg);
}
3、animation动画 由@keyframes来描述每一帧的样式
div{
animation:myAnimation 5s infinite
}
@keyframes myAnimation {
0%{left:0;transform:rotate(0);}
100%{left:200px;transform:rotate(180deg);}
}
区别：
/*css:*/
div{
width:100px;
height:100px;
transition:all 1s;
}
//js
divEle.onclick = function(){
divEle.style.width = "200px";
divEle.style.height = "200px";
}
文章标题：CSS3动画transform、transition和animation的区别
文章链接：http://soscw.com/index.php/essay/43220.html