css3动画

    

学css3动画之前，我们先来学习最基本的浏览器内核，根据不同的浏览器内核，css前缀会有不同。

（一）浏览器私有前缀       

1. 火狐浏览器   Gecko   前缀为-moz-
2. 谷歌浏览器   Webkit   前缀为-wedkit-   chrome浏览器最先开发使用，safari浏览器也使用
3. IE浏览器     Trident     前缀为-ms-
4. opera浏览器  Presto     前缀-0-

小总结：在实际使用中通常将所有前缀写一遍后，标准的写在最后

（二）CSS3装换  Transform  3D装换

CSS3中的装换允许我们对元素进行旋转、缩放、移动或倾斜。分为2D转换和3D转换。

在css2时代，如果要做一些图片转换角度，都依赖于图片或JavaScript才能完成。但是旋转借助css3就可以轻松完成倾斜、缩放、移动、以及翻转元素。通过css变形，可以让元素生成静态视觉效果，结合css3中的transition和keyframe产生动画效果。

3D转换我们主要学习工作中最常用的3D位移和3D转换

主要知识点

平移动画属性：transform

1. 平移属性：translate
2. 旋转属性：rotate
3. 缩放属性：scale
4. 倾斜属性：skew

    ·3D位移：translate3d(x、y、z)

 ·3D旋转：rotate3d(x、y、z)

·透视：perspective

·3D呈现transfrom-style

      transfrom-style:flat子元素不开启3d立体空间默认的

      transfrom-style：preseve-3d；子元素开启立体空间

 

（三）css3选择器

结构伪类选择器

fiest-child   匹配父元素中的第一个子元素

last-child    匹配父元素中的最后一个元素

nth-child    匹配父元素中的第n个子元素

fiest-of-type  指定类型的第一个

last-of-type   指定类型的最后一个

nth-of-type(n)  指定类型的第n个

伪元素选择器

：：before    在元素内部的前面插入内容

：：after     在元素内部的后面插入内容

(四）css3的动画属性

动画可以实现更多变化，更多控制，连续自动播放等效果

常用的动画属性

 Animation ： 动画名称   持续时间   运动曲线   何时开始   播放次数   是否反方向（方向direction）  动画起始或者结束状态     fill-mode(是否停留在最后一个状态）

简写形式：animation：move 2s linear(匀速） 0s  1  alternate(跑马灯）  forwards(最后样式）或 backwards（最初样式）

 当鼠标悬停在div元素上时，会产生名为move的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义move效果。.

div:hover{
       animation:move 2s;
      }

@keyframes 规则

可以通过百分比设置  例如 @keyframes move{

0%{}定义开始状态

50%{}

                        100%{}结束状态

}

from 和 to 等同于0% 和100%

也可以 动画序列  @keyframes move{

from{}

to{}

  }