css3的transfrom，transition, animation

transition是过渡属性  用于设置四个过渡属性

• transition-property     规定设置过渡效果的 CSS 属性的名称。
• transition-duration       规定完成过渡效果需要多少秒或毫秒。
• transition-timing-function     规定速度效果的速度曲线。
• transition-delay       定义过渡效果何时开始。

 会有宽度变化过度效果,时间是2s

#test {
    width: 100px;
    height: 100px;
    background-color: cyan;
    transition: width 2s linear; 
}

#test:hover {
    width: 300px;
    height: 100px;
}

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

•  旋转：transform:rotate(-45deg);
• 缩放：transform:scale(.5); scaleX(2); scaleY(3)。如果给了负值，能够达到翻转的效果：scaleX(-1)
• 移动：transform: translate(1px,2px)
• 倾斜：transform:skew(45deg,0);

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name     规定需要绑定到选择器的 keyframe 名称
• animation-duration    规定完成动画所花费的时间，以秒或毫秒计。
• animation-timing-function   规定动画的速度曲线。
• animation-delay      规定在动画开始之前的延迟。
• animation-iteration-count   规定动画应该播放的次数。
• animation-direction    规定是否应该轮流反向播放动画。

创建animation动画有两个步骤

1.定义动画：主要指定义关键帧 

@keyframes fadeIn{
   from{
      opacity:0;
  },
  to{
     opacity:1;   
 }
}

2.将动画应用到元素上

.nav-button{
   animation-name:fadeIn;
   animation-duration:1s;
   animation-timing-function:ease-out,
   animation-delay:.5s;
   animation-iteration-count:infinite;  
   animation-direction:alternate
}

区别transition 

  transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。

  transition必须使用触发器触发，animation可以使用触发器，也可以在页面加载完成的时候自动触发。