css3中的transform、transition、translate、animation，@keyframes的区别

一、前言

　　在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只是一个过渡 只能设置 初始值和结束值。

三、结语

先到这儿喽！