CSS3：transform translate transition 这些都是什么？

Posted 2020-08-06 osimly

transform：一个属性名称，即CSS3 2D转换 属性。

translate：一个属性函数，用法是translate(dx,dy)

1 div
2 {
3     transform: translate(50px,100px);
4 }

transition：一个属性名称，添加过渡效果。

1 div
2 {
3     width: 200px;
4     transition: width 2s;
5 }
6 
7 div:hover{
8     width: 300px;
9 }

还有动画animate：

 1 @keyframes myfirst
 2 {
 3     from {background: red;}
 4     to {background: yellow;}
 5 }
 6 
 7 div
 8 {
 9     animation: myfirst 5s;
10 }

把 transform 丢到 keyframe 的 from / to 里面就可以实现炫酷的效果。