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);}
}

资源网站大全 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负责动画效果,如:

/*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的区别

上一篇:Draw graph(network) with nx_pydot in networkx


下一篇:php学习系列之-eclipse的xdebug使用