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

三、结语

先到这儿喽！