CSS3动画学习笔记记录

一、浏览器私有前缀

1、CSS标准中各属性都要经历从草案到推荐的过程，CSS3中属性进展都不一样，浏览器厂商在标准尚未明确的情况下提前支持会有风险，所以会加厂商前缀进行区分。
2、根据不同的浏览器内核，CSS前缀也不同。
  （1）、Gecko内核 前缀为 -moz- 火狐浏览器
  （2）、Webkit内核 前缀为 -webkit- 谷歌浏览器 
  （3）、Trident内核 前缀为 -ms- IE内核浏览器
  （4）、Presto内核 前缀为 -o- 目前只有opera采用（欧朋支持）
  实际使用中，通常将所有前缀写一遍后，标准的写在最后。

二、圆角边框

1、border-radius (书写格式多变)
   （1）、完整格式 2个参数8个值（顺时针方向 水平方向/垂直方向 ）
        eg: border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
   （2）、一个参数两个值时，对角线效果（左上右下、右上左下）

三、阴影（盒子阴影+文字阴影）

1、盒子阴影 box-shadow
  eg: box-shadow: 10px 10px 5px red; // 水平方向像素 垂直方向像素 模糊度 阴影颜色
  eg: box-shadow: 0px 0px 10px 10px red; // 水平方向像素 垂直方向像素 模糊度 外延值 阴影颜色
  eg: box-shadow: 10px 10px 5px #ff7500 inset; // 内置阴影
2、文字阴影 text-shadow
  eg: text-shadow: 10px 10px 3px red; // 水平方向像素 垂直方向像素 模糊度 阴影颜色   
  可加多个阴影，之间用逗号分隔，阴影效果会叠加。
  盒子阴影可设置多个外延属性叠加 画彩虹。

四、CSS3渐变 gradients （在两个或多个指定颜色之间显示平稳的过度）

设置渐变不能给背景颜色background-color,实际属于背景图片
1、线性渐变 （Linear Gradients）
  向下/向上/向左/向右/对角方向
  eg: background: linear-gradient(direction,color-stop1,color-stop2, ...)
  eg：background: linear-gradient(180deg,blue,yellow);
  eg：background: linear-gradient(to left top,blue,yellow);
  eg：background: repeat-linear-gradient(blue 20%,yellow 40%); // 重复渐变
2、径向渐变 （Radial Gradients）（由他们的中心定义）
  默认情况下，渐变的重心点是center表示中心点，渐变的形状是ellipse（椭圆）
  值：  形状可取值：circle和ellipse 圆/椭圆
        中心可取值：at center center
                   语法： at x y 都是从左上角原点为参考点
                          可以是像素，也可以是百分比。
        大小可取值：最近边 closest-side
                    最远边 faterest-side
                    最近角 closest-corner
                    最远角 fatherest-corner
  eg：background: redial-gradient(center,shape,size,startColor,...,lastColor); // 中心点 形状，大小，颜色

五、转换Transform(2D转换)

    CSS3中转换允许对元素进行旋转，缩放，移动或倾斜，分2D转换和3D转换。
    transform中属性用函数来定义，格式 transform: 函数名（x值，y值）包括
        translate() 移动，接收px值 支持一个参数（水平方向）
        scsale() 缩放 值为1时不变，接收两个值时水平垂直单独缩放。缩放时div中内容也会缩放
        rotate() 旋转 20deg 旋转20度 只接受一个参数旋转角度。
        skew() 倾斜 可接受一个或两个参数：eg:40deg 倾斜角度

六、Transform3D（3D转换）（一下方法均提供单独x y z函数）

    translate3d() 移动
    scale3d() 缩放
    rotate3d() 旋转
    补充：perspective 透视 呈现出伪3D效果。 
transform中属性方法可连贯使用。

七、transition 过渡 （使CSS属性在一段时间内平滑的过渡）

1、指定四个要素
    (1)、过度属性（transition-property） eg: background,color...多个属性逗号隔开 none|all
    (2)、过度所需要时间(transition-duration) 默认为0，不会有效果
    (3)、过度函数(transition-timing-function) ease|linear|ease-in|ease-out|ease-in-out|ease-in-out
        ease：默认值，规定慢速开始，然后变快，最后慢速结束
        linear：匀速
        ease-in：慢速开始 加速效果
        ease-out：慢速结束 减速效果
        ease-in-out： 慢速开始和结束 先加速后减速
    (4)、过渡延迟时间(transition-delay)：多长时间后进行过渡效果 eg: 1s
2、触发过渡 
    通过行为触发，eg:用户点击 鼠标悬停...
    简写示例: transition: all 2s 0s ease; // 标签 执行时间 延迟 过渡函数

八、动画animation

通过关键帧控制动画的每一步，使元素从一种样式逐渐变化为另一种样式，实现复杂的动画效果。
1、@keyframes：用于声明动画，指定关键帧
    语法：@keyframes name {
        from|0%{CSS样式}
        parcent{CSS样式}
        to|100%{CSS样式}
    }
2、animation属性 用于控制动画，调用由@keyframes定义的动画，设置动画属性（时间、次数等）
语法：animation: name duration time-function delay iteration-count direction;
                 动画名 完成时间 函数 延迟时间 执行几次 方向
动画子属性：
    animation-name:
    animation_duration:
    animation-time-function:
    animation-delay:
    animation-iteration-count: 数值|infinite(无限次播放)
    animation-direction: normal|alternate（奇数正常播放，偶数倒着播放）; 
    animation-fill-mode: dorwards(动画停在最后一帧)|none;
    animation-play-state:pause|running;动画正在运行还是暂停