css3变形动画的一些基础知识

摘要：指定完成过渡所需的时间，完成一次动画所需时间指定过渡函数，动画播放方式指定开始出现的延迟时间，如果没有延迟我们可以用或者直接不写。第一种第二种第三种被称为关键帧，其类似于中的关键帧。表示动画在结束后继续应用最后的关键帧的位置。

rotate(180deg)2D旋转正值代表顺时针旋转180度，负值代表逆时针旋转，用法transform:rotate(180deg);

rotate3d(x,y,z,angle);3D旋转
1、x是0-1之间的数值，主要用来描述元素围绕X轴旋转的矢量值。
2、y是0-1之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。
3、z是0-1之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。
4、angle是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

rotateX(180deg)3D旋转，元素围绕其X轴以给定的度数进行旋转。用法transform:rotateX(180deg);相当于transform:rotate3d(1,0,0,180deg)

rotateY(180deg)3D旋转，元素围绕其Y轴以给定的度数进行旋转，用法transform:rotateY(180deg);相当于transform:rotate3d(0,1,0,180deg)

rotateZ(180deg)3D旋转，元素围绕其Z轴以给定的度数进行旋转，用法transform:rotateZ(180deg);跟rotate(180deg)效果一样。相当于transform:rotate3d(0,0,1,180deg)

rotate用法：

  
    
    
  
  
    
3D rotateY
    
3D rotateX
    
3D rotateZ
    
3D rotate3d
    
2D rotate
  

skew(45deg,45deg)2D斜切，代表水平方向和垂直方向同时扭曲45度。用法transform:skew(45deg,45deg);

skewX(45deg)2D斜切，代表水平方向扭曲45度。用法transform:skewX(45deg);

skewY(45deg)2D斜切，代表垂直方向扭曲45度。用法transform:skewY(45deg);

skew用法

  
    
    
  
  
    
skew
    
skewX
    
skewY
  

scale(1.5,0.5)2D缩放，代表水平方向缩放1.5，垂直方向缩放0.5。用法transform:scale(1.5,0.5);

scaleX(1.5)2D缩放，代表仅水平方向缩放1.5。用法transform.scaleX(1.5);

scaleY(0.5)2D缩放，代表垂直方向缩放0.5。用法transform.scaleY(0.5);

scaleX(1.5)3D缩放，代表仅水平方向缩放1.5。用法transform.scaleX(1.5);

scaleY(0.5)3D缩放，代表垂直方向缩放0.5。用法transform.scaleY(0.5);

scaleZ(0.5)3D缩放，代表z轴方向缩放0.5，如果是一个2D图看不出来效果。用法transform.scaleZ(0.5);

scale实现

  
    
    
  
  
    
scale
    
scaleX
    
scaleY
    
scaleZ
  

translate(50px,100px)2D位移，代表水平方向向右移动50像素，垂直方向向下移动100像素。用法transform:translate(50px,100px);

translateX(50px)2D位移，代表水平方向向右移动50像素。transform:translateX(50px);

translateY(100px)2D位移，代表垂直方向向下移动100像素。用法transform:translateY(100px);

translate3d(x,y,z)3D位移，代表水平方向向右移动50像素，垂直方向向下移动100像素，z轴移动100像素。用法transform:translate3d(50px,100px,100px);

translateX(50px)3D位移，代表水平方向向右移动50像素。transform:translateX(50px);

translateY(100px)3D位移，代表垂直方向向下移动100像素。用法transform:translateY(100px);

translateZ(100px)3D位移，代表Z轴方向移动100像素。用法transform:translateZ(100px);

translate用法

  
    
    
  
  
    
translate
    
translate3d
    
translateX
    
translateY
    
translateZ
  

matrix(a,b,c,d,e,f)矩阵，具体暂不深入了解，等其他的用熟练之后再深入了解

transform-origin: left top;修改中心点为左上角，相当于transform-origin: 0 0;右下角transform-origin: right bottom;相当于transform-origin: 100% 100%;

如果我们同时需要进行多个变形，我们可以这样写

transform:rotate(360deg) scale(1.2,1.2);

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

transition-property:指定过渡或动态模拟的CSS属性，我们也可以写all或者直接不写，代表过渡所有的属性。

transition-duration:指定完成过渡所需的时间，完成一次动画所需时间

transition-timing-function:指定过渡函数，动画播放方式

transition-delay:指定开始出现的延迟时间，如果没有延迟我们可以用0s或者直接不写。

transition: background-color .5s ease .1s;总和写法

transition使用方法

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange;
}

上面内容也可以写成下面样式

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -ms-transition-property:background-color;
  -moz-transition-property:background-color;
  -webkit-transition-property:background-color;
  -o-transition-property:background-color;
  transition-property:background-color;
  -ms-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -webkit-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
  -ms-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -ms-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -webkit-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  background-color: orange;
}

在transiton中我们可以给多个属性加动画，下面是加动画的几种方式。

第一种:
transition:all 1s ease 1s;
第二种：
transition:width 1s,height 2s,color 3s;
第三种：
transition:width 1s;
transition:height 2s;
transition:color 3s;

@keyframes被称为关键帧，其类似于flash中的关键帧。常用方式

@keyframes changecolor{
  0%{
   background: red;
  }
  50%{
    background: green;
  }
  100%{
    background: green;
  }
}

或者

@keyframes changecolor{
  from{
   background: red;
  }
  to{
    background: green;
  }
}

animation-name: none指定@keyframes创建的动画名，当为none时，将没有任何动画效果，可以用于覆盖任何动画。

animation-duration:指定完成过渡所需的时间，完成一次动画所需时间

animation-timing-function指定过渡函数，动画播放方式

animation-delay指定开始出现的延迟时间

animation-iteration-count:1;指定播放次数，如果值为infinite动画将会无限次的播放

animation-direction:normal/alternate动画播放的方向

animation-play-state:running/paused动画播放的状态，正在播放/暂停。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

animation-fill-mode 定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。

1.none默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处。
2.forwards表示动画在结束后继续应用最后的关键帧的位置。
3.backwards会在向元素应用动画样式时迅速应用动画的初始帧。
4.both元素动画同时具有forwards和backwards效果