css3 变形与动画

一，css变形

1，旋转 rotate()

语法：.class {transform: rotate(num deg);}，num为数字
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

2，扭曲 skew()

语法：.class {skew(x,y)}，x，y为数字，单位是deg
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

3，缩放 scale()

语法：.class {scale(X,Y)} x,y为数字，0～1缩小，>1放大
注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

4，位移 translate()

语法：.class {translate(x,y)}x,y为数字，单位可以是px
translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

5，原点 transform-origin

语法：.class {transform-origin: position;}，position为位置描述，如图

位置

任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。

二，动画 transition

CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。

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

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

• transition-property:指定过渡或动态模拟的CSS属性
• transition-duration:指定完成过渡所需的时间
• transition-timing-function:指定过渡函数
• transition-delay:指定开始出现的延迟时间

有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“,”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。
例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

1，过渡属性 transition-property

语法：.class {transition-property: attr;} attr为CSS属性名称
transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：

image

2，过渡时间 transition-duration

语法：.class {transition-duration: .5s;} .5是数字秒数，单位s
transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

3，过渡函数 transition-timing-function

语法：.class {transition-timing-function: value;} value为时间函数
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

image

4，延迟时间 transition-delay

语法：.class {transition-delay: .5s;} .5是数字秒数，单位s
transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

三，动画 Keyframes

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

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

关键帧的调用使用 animation，语法：.class {animation: framesName durationTime timeFunction startTime;} framesName为关键帧的名称，durationTime为数据帧的开始时间，timeFunction为时间函数，startTime为开始延时时间。例如.class {animation: changecolor 5s ease .1s;}

1，调用动画 animation-name

语法：.class {animation-name: none | IDENT;} IDENT 为定义的动画名，none取消动画
animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。

2，持续时间 animation-duration

语法：.class {animation-duration: } time为执行持续时间，单位s
animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。

3，动画函数 animation-timing-function

语法：.class {animation-timing-function: ;} funciton为动画时间函数
animation-timing-function属性主要用来设置动画播放方式。它和transition中的transition-timing-function一样，具有以下几种变换方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。

4，延时时间 animation-delay

语法：animation-delay: time为延时时间，单位s
animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。

5，播放方式 animation-iteration-count

语法：animation-iteration-count: infinite | infinite无限播放，number播放次数

6，播放方向 animation-direction

语法：animation-direction:normal | alternate
其主要有两个值：normal、alternate

• normal（默认值），如果设置为normal时，动画的每次循环都是向前播放；
• alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

7，播放状态 animation-play-state

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

8，时间外属性 animation-fill-mode

***语法：.class {animation-fill-mode: none | forwards | backwords | both; } ***
属性值：

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