内容包括：

  • 概述
  • CSS3变形
  • CSS3过渡
  • CSS3动画
  • 总结

概述

CSS3 变形

1.1 CSS3变形简介

CSS3变形是一些效果的集合，比如平移、旋转、缩放、倾斜效果等，每个效果被称作变形函数，操作元素进行相应的变化。

CSS3变形允许动态的控制元素，结合不同的变形函数产生复杂的动画效果，也可以结合CSS3的transition和动画的keyframe产生更加多变的动画效果。

下面例举了变形函数：

浏览器兼容性问题

虽然CSS3变形得到了主流浏览器较好地支持，但每个浏览器支持的程度不同，实际使用中要添加浏览器私有属性前缀。这里顺便就总结一下浏览器私有前缀。

浏览器私有前缀

待总结

1.2 CSS变形属性

1.2.1 transform属性

基本语法：transform: none |

参数含义：none表示元素不变形，transform-function即变形函数

transform-function 表格列出变形函数

1.2.2 transform-origin属性

属性作用：指定元素中心点位置，即重置元素的原点。

基本语法：transform-origin: 参数略（可以是%、em、px等具体值，也可以是center等关键词）

注意点：旋转、缩放和倾斜变形可以按照重置原定进行，但平移变形始终按照元素中心点进行位移。

1.2.3 transform-style属性

基本语法：transform-style: flat | preserve-3d

参数含义：flat表示所有子元素在2d平面呈现，preserve-3d则表示在3d空间呈现

1.2.4 perspective属性

属性作用：设置查看者的位置，将可视内容映射到一个视锥上，然后偷到一个2D视平面上

基本语法：perspective: none |

参数说明：none表示无限视距，长度值越大，角度越远，长度值越小，越接近我们所看到得3D效果

此外，还有一个perspective()函数，它与perspective属性作用相同，区别在于perspective属性应用在变形元素的共同父元素上，而perspective()函数作用在当前元素。

用法：

.box {
    perspective: 600px;
}
.box {
    transform: perspective(600px);
}

1.2.5 perspective-origin属性

属性作用：决定perspective属性的源点角度

1.2.5 backface-visibility属性

属性作用：决定元素旋转背面是否可见

基本语法：backfce-visibility: visible | hidden

参数说明：visible表示背面可见，hidden表示背面不可见（扑克牌翻牌效果）

1.3 CSS3 2D变形

1.3.1 2D位移

基本语法：translate(tx,ty) | translateX(tx) | translateY(ty)

参数说明：tx表示x轴偏移量，ty表示y轴偏移量，x轴tx为正表示向右

1.3.2 2D缩放

基本语法：scale(sx,ts) | scaleX(sx) | scaleY(sy)

参数说明：使用方法跟translate相似

1.3.3 2D旋转

基本语法：rotate(a)

参数说明：a代表角度值，为正时相对元素中心顺时针旋转，为负时相对元素中心逆时针旋转，参数单位deg

1.3.4 2D倾斜

基本语法：skew(ax,ay) | skewX(ax) | skewY(ay)

参数说明：ax指定元素水平方向倾斜的角度，ay指定元素竖直方向倾斜的角度。

1.3.5 2D矩阵

基本语法：matrix(参数)

参数说明：以上的变形函数可以用matrix函数表示，具体用法略

1.4 CSS3 3D变形

1.4.1 3D位移

基本语法：translate(tx,ty,tz) | translateZ(tz)

1.4.2 3D缩放

基本语法： scale(sx,sy,sz) | scaleZ(sz)

1.4.3 3D旋转

基本语法： rotateX(a) | rotateY(a) | rotateZ(a)

1.4.4 3D矩阵

基本语法： 略

1.5 多重变形

多个变形函数之间用空格隔开

demo练习

待定

CSS3 过渡

2.1 CSS3过渡简介

CSS3中得transition允许CSS元素值在一定的时间区间内平滑地过渡。

只要目标元素属性更改，浏览器就会应用过渡，除了使用js出发动作外，CSS中也可以通过一些伪类触发，比如：:hober,:focus,:active,:target,:checked等。

使用CSS创建过渡的步骤：

  1. 在默认样式中声明元素的初始状态样式
  2. 声明过渡元素最终状态样式，比如悬浮样式
  3. 在默认样式中通过添加过渡函数，添加不同的样式

浏览器兼容性：跟CSS3变形一样实际使用时需要添加浏览器私有前缀

transition属性是一个复合属性，包含四个属性值transition-property、transition-duration、transition-timing-function、transition-delay。

一般的属性设置顺序：

transition: all 1s ease-in-out .5s;

transition: 过渡属性 过渡所需时间 过渡动画函数 过渡延迟时间

2.2 属性详解

2.2.1 指定过渡属性transition-property

基本语法：transition-property: none | all | 指定样式

能够完成过渡的属性：具有过渡的中间值

  • 颜色属性
  • 具有长度值
  • integer
  • number浮点数值
  • 变形系列属性
  • rectangle
  • visiblity
  • 阴影
  • 渐变
  • SVG

2.2.2 指定过渡所需时间transition-duration

2.2.3 指定过渡函数transition-timing-function

参数：ease, linear, ease-in, ease-out, ease-in-out

三次贝瑟尔曲线：定义cubic-bezier(P0,P1,P2,P3)

transition-timing-function: cubic-bezier(.85,0,1,1)

step()函数：语法step(integer ,[start | end]]) 第一个参数是一个数值，指定step()函数间隔的数量，第二个参数可选，默认为end

2.2.4 指定过渡延迟时间transition-delay

2.25 多个CSS3过渡效果

用逗号分隔要多度的各个CSS属性

2.3 CSS3触发过渡

2.3.1 为元素触发

:active, :focus, :checked

2.3.2 媒介查询触发

2.3.3 Js触发

tips：事件通常由js触发，简单动画和过渡用css触发

2.4 CSS3过渡技巧

未总结

CSS3 动画

3.1 CSS3动画简介

CSS3通过animation实现动画和transition实现动画非常相似，都是通过改变元素的属性值实现动画效果，区别在于transition属性只能指定属性的初始状态和结束状态，然后在两个状态之间进行平滑地过渡。而animation实现动画效果主要由两部分组成：

  • 通过类似flash动画中的关键帧来声明一个动画
  • 在animation属性中调用关键帧声明的动画，从而实现更为复杂的动画效果

animation同transition一样是一个复合属性，animation具有8个子属性：

  1. animation-name: 指定一个关键帧动画的名字，必须对应一个@keyframe规则
  2. animation-duration: 设置动画播放所需时间，一般以秒为单位
  3. animation-timing-function: 设置动画的播放方式
  4. animation-delay: 指定动画开始时间，一般以秒为单位
  5. animation-iteration-count: 指定动画播放的循环次数
  6. animation-direction: 指定动画播放方向
  7. animation-play-state: 控制动画的播放状态
  8. animation-fill-mode: 设置动画时间外属性

多个动画属性应用到同一个元素上时用分号分隔开

3.2 关键帧

关键帧语法：

@keyframes animation-name {
    0%{
        /css样式/
    }
    50%{
        /css样式/
    }
    100%{
        /css样式/
    }



}

3.3 CSS中为元素应用动画

3.3.1 使用@keyframes声明动画

@keyframes wobble {
    0%{
        /css样式/
    }
    50%{
        /css样式/
    }
    100%{
        /css样式/
    }



}

3.3.2 调用@keyframes声明的动画

.demo{
    animation: wobble .2s ease-in;
}

CSS3动画子属性详解
  1. animation-name: 指定一个关键帧动画的名字，必须对应一个@keyframe规则
  2. animation-duration: 设置动画播放所需时间，一般以秒为单位
  3. animation-timing-function: 设置动画的播放方式
  4. animation-delay: 指定动画开始时间，一般以秒为单位
  5. animation-iteration-count: number | infinite;
  6. animation-direction: normal | alternate ;
  7. animation-play-state: running | paused;
  8. animation-fill-mode: none | forwards | backwards | both