1.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、缩放scale、移动translate或倾斜skew
scale(sx,sy):sx代表缩放向量的横坐标。sy代表缩放向量的纵坐标,如果sy没有指定,默认与sx值相等,这样可以保持一致的缩放比例,保持元素的形状。
scaleX(x),scale(y)=>scale(x,y).若y未被提供,y=x.
translateX(x),translate(y)=>translate(x,y)。若y未被提供,则y为0.
transition和animation两者都能实现动画效果,transform常常配合tranisition和animation使用。
2.transition样式过渡,从一种效果逐渐改变为另一种效果。
transition:transition-property tranisition-duration tranisition-timing-function transition-delay.
例1:
例二:
div{ width:100px; height:100px; transition:transform 2s; }
div:hover{ transform:rotate(180deg); }
3.animation动画由@keyframes来描述每一帧的样式
animation: name duration timing-function delay iteration-count direction
例一: div{
animation:myAnimation 5s infinite
}
@keyframe myAnimation {
0%{left:0;transform:rotate(0);}
100%{left:200px;transform:rotate(180deg);}
}
区别:**
1)transform仅描述元素的静态样式,常常配合tranisition和animation使用
2)transition通常和hover等事件配合使用,animation是自发的,立即播放
3)animation可以设置循环次数
4)animation可设置每一帧的样式和时间,tranisition只能设置头尾
5)tranisition可与js配合使用,js设定要变化的样式,transition负责动画效果,如:
/*css:*/
div{
width:100px;
height:100px;
transition:all 1s;
}
//js
divEle.onclick = function(){
divEle.style.width = "200px";
divEle.style.height = "200px";
}