一、前言
在CSS中，我们经常会使用到transform、transition、translate、animation（@keyframes）这些长得相似，又不好区分的属性（值）。每当需要使用它们，都需要去查找相关的介绍和使用方法，完成后却又继续困惑中。而本篇博客将将它们汇合起来，一起介绍给你。
简单介绍：
- transform属性：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
例如：transform:rotate(7deg); transform:translate(x,y);。 - translate属性值：是transform的值，定义 2D 转换，表示对当前元素的位移
和rotate(angle)旋转，scale(x,y)缩放等并列 ，同为transform的值。 - transition属性：允许CSS属性值在一定的时间区间内平滑的过渡，需要事件的触发，例如单击、获取焦点、失去焦点等
例如：transition(border-radius 2s); 表示在两秒时间内过渡border-radius属性的变化状态 - animation属性：通过帧动画对当前元素的某些属性进行帧动画的播放，功能相似于transition，但更加的精确、可控
例如：animation:mymove 5s infinite;（mymove是帧动画的名称） - translation：意思是翻译，在CSS中没有任何应用，不过它容易和上面的混淆。。。
二、正文
1.transform介绍
- 旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)
- 扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(50deg,20deg)
- 缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)
- 移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离
div{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer 9*/
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
上面的代码表示：对元素旋转了9度，还可以进行其他的转换scale的缩放和translate的位移。
2.translate介绍：
translate(x, y)只是transform的一部分，主管位移功能。
还有：translate3d(x, y, z)和translateX(x)、translateY(y)、translateZ(z)。
3.transition介绍
transition属性是个复合属性，她包括以下几个子属性：
- transition-property ：规定设置过渡效果的css属性名称
- transition-duration ：规定完成过渡效果需要多少秒或毫秒
- transition-timing-function ：指定过渡函数，规定速度效果的速度曲线
- transition-delay ：指定开始出现的延迟时间
默认值分别为：all 0 ease 0
div{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover{
width:300px; /* 也可以对颜色进行过渡，比如background: red;*/
}
上面的代码表示：在2s内对元素进行宽度从100px到300px的变化过渡；
注意：CSS属性值在一定的时间区间内平滑的过渡，需要事件的触发，例如单击、获取焦点、失去焦点等
https://www.cnblogs.com/afighter/p/5731293.html
4. animation和@keyframes关键帧的介绍
animation属性是个复合属性，她包括以下几个子属性：
- animation-name 规定需要绑定到选择器的 keyframe 名称。。
- animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
- animation-timing-function 规定动画的速度曲线。
- animation-delay 规定在动画开始之前的延迟。
- animation-iteration-count 规定动画应该播放的次数。
- animation-direction 规定是否应该轮流反向播放动画。
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:move 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes move{
from {top:0px;}
to {top:200px;}
}
上面的代码表示：在5s内对元素的相对位置的top属性进行从0px到200px的移动。
transition和animation的区别：
- animation可以控制到每一帧，
高版本的浏览器还支持css或者JS控制停止动画 以及获取动画当前状态等； - translation只是一个过渡 只能设置 初始值和结束值。
三、结语
先到这儿喽！