css3形变与动画

• css3形变效果

#box{
     transform:matrix(); //矩阵变换
     transform:translate(x,y)//平移变换
     transform:scale(x,y) //水平竖直方向伸缩变换
     transform:rotate(); //2d旋转
     transform:skew();//倾斜变换

     transform: rotate() scale(x,y) skew(); //缩写形式
}

• css3过渡动画（鼠标移入动画发生，鼠标移出恢复默认）

   #div{
      transition-property:all;//指定动画属性一般写all即可
      transition-duration:2s;//动画过渡时间
      transition-timing-function:ease/linear //定义动画效果
      transition-delay:1s;//动画延迟时间
     
      transition:background-color 1s ease 1s,transform 1s linear 1s;//缩写形式
   } 
   #div:hover{
       background-color:red;
       transdorm:scale(2);
   }

• animations动画
  animations和transitions都是通过改变元素属性实现动画效果，但transitions只能指定开始和结束，animations可以实现更复杂的效果。

//声明一个自定义动画name1
@keyframes name1{
    0%{ margin-left:0px; }
   50%{ margin-left:100px; }
  100%{ margin-left:200px; }
}

#div{
  animation-name:name1;//调用声明的动画
  animation-duration:2s;//动画持续时间
  animation-timing-function:linear;//动画播放方式
  animation-delay:1s;//动画延迟时间
  animation-iteration-count:3;//动画播放次数
  animation-direction:aalternate://动画方向交替
  animation-fill-mode:forwards;//动画会停留在最后一帧

  animation:name1 2s linear 1s 3 alternate forwards;//简写形式
}