transform、transition、translate、animation（@keyframes）的区别

查了网上的资料，自己也归纳总结了一下，加深记忆，也方便日后查阅

transform

• 旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg) 
• 扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(50deg,20deg) 
• 缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4) 
• 移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离

  div{
  margin:0 auto;
  width:200px;
  height:150px;
  background-color:yellow;
  /* 旋转div */
  transform:rotate(20deg);
  -ms-transform:rotate(20deg); /* Internet Explorer 9*/
  -moz-transform:rotate(20deg); /* Firefox */
  -webkit-transform:rotate(20deg); /* Safari 和 Chrome */
  -o-transform:rotate(20deg); /* Opera */
  }

translate

• translate(x, y)只是transform的一部分，主管位移功能。
• 还有：translate3d(x, y, z)和translateX(x)、translateY(y)、translateZ(z)。

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属性值在一定的时间区间内平滑的过渡，需要事件的触发，例如单击、获取焦点、失去焦点等

 

 

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