CSS3中的变形与动画

一、变形

旋转 rotate()

通过指定的角度参数使元素相对原点进行旋转。

主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。

正值	元素相对原点中心顺时针旋转
负值	元素相对原点中心逆时针旋转

用法如下：

transform: rotate(45deg);

扭曲 skew()

让元素倾斜显示

可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜 

skew（）不会旋转，但会改变元素的形状

用法如下：

skew(x,y)	使元素在水平和垂直方向同时扭曲
skewX(x)	仅使元素在水平方向扭曲变形
skewY(y)	使元素在垂直方向扭曲变形

transform:skew(0deg);

缩放 scale()

元素根据中心原点对对象进行缩放 

用法如下： 

scale(x,y)	使元素在水平和垂直方向同时缩放
scaleX(x)	仅使元素在水平方向缩放
scaleY(y)	使元素在垂直方向缩放

 位移 translate()

将元素向指定的方向移动 

 用法如下：

translate(x,y)	使元素在水平和垂直方向同时移动
translateX(x)	仅使元素在水平方向移动
translateY(y)	使元素在垂直方向移动

 矩阵 matrix()

基于水平方向（X轴）和垂直方向（Y轴）重新定位元素 

参数1	X轴缩放
参数2	Y轴扭曲
参数3	X轴扭曲
参数4	Y轴缩放
参数5	X轴移动距离
参数6	Y轴移动距离

二、动画 

 原点 transform-origin

 对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。

 过渡属性 transition-property

用来指定过渡动画的CSS属性名称

过渡所需时间 transition-duration

主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

过渡函数 transition-timing-function

指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度

过渡延迟时间 transition-delay

指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行 

通常上面的过度属性是写在 transition中一起

Keyframes

Keyframes被称为关键帧，在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

通常结合animation使用

@keyframes wobble {
  0% {
    margin-left: 100px;
    background:green;
  }
  40% {
    margin-left:150px;
    background:orange;
  }
  60% {
    margin-left: 75px;
    background: blue;
  }
  100% {
    margin-left: 100px;
    background: red;
  }
}
div:hover{
  animation: wobble 5s ease .1s;
}

 动画调用 animation-name

主要是用来调用 @keyframes 定义好的动画

动画播放时间 transition-duration

用来设置CSS3动画播放时间 也就是完成从0%到100%一次动画所需时间

动画播放方式 animation-timing-function

用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率】

 动画开始播放的时间 animation-delay

用来定义动画开始播放的时间，用来触发动画播放的时间点

动画播放次数 animation-iteration-count

主要用来定义动画的播放次数。

如果取值为infinite，动画将会无限次的播放。

动画播放方向 animation-direction

主要用来设置动画播放方向

normal是默认值，如果设置为normal时，动画的每次循环都是向前播放

另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

动画的播放状态 animation-play-state

主要用来控制元素动画的播放状态

其主要有两个值：running和paused。

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

动画时间外属性 animation-fill-mode

定义在动画开始之前和结束之后发生的操作

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