translate:移动,transform的一个方法。
translate() 平移,传进 x,y值,代表沿x轴和y轴平移的距离:
用法: transform: translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
transform可以结合Transition和Animation一起使用
例如:
transform结合Transition
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;/*宽度变化2s,高度2s,transform中rotate旋转2s*/
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
transform结合Animation
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;/*把 "myfirst" 动画捆绑到 div 元素,时长:5 秒*/
-webkit-animation:myfirst 5s; /* Safari and Chrome */
color:yellow;
text-align:center;
line-height:100px
}
@keyframes myfirst
{
from {background:red;color:yellow;transform:rotateY(0deg);}
to {background:yellow;color:red;transform:rotateY(60deg);}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;color:yellow;transform:rotateY(0deg);}
to {background:yellow;color:red;transform:rotateY(60deg);}
}
区别:
1. 触发条件不同。transition通常和hover等事件配合使用,由事件触发。而animation则立即播放。
2. 循环。 animation可以设定循环次数。
3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。
4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式,transition负责动画效果,天作之合,比之前只能用js时爽太多。