08.07 css变形转换 相关属性 变形方法 css过渡相关属性 触发时机 可以过渡的属性 css3动画相关属性 关键帧

css3动画相关属性 关键帧

# CSS3 变形/变换
### 相关属性
* transform
* transform-origin  起点 等同于center center

* transform-style: flat/preserve-3d

指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

    当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。
    决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <' transform-style '> 属性。
    对应的脚本特性为transformStyle。

 

flat：
    指定子元素位于此元素所在平面内
preserve-3d：
    指定子元素定位在三维空间内


* perspective: 长度单位 观察者距离
* perspective-origin 观察者起点
* backface-visibialbe: visible/hidden 背面是否可见 在3d里可用

### 变形方法 transform-function
* 2d
    *  translate()    指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
    *  translatex()
    *  translatey()

    * 3d rotate()    指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义  中心点开始从左往右

 


    *  scale()        指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
    *  scalex()
    *  scaley()
    *
    *  skew()          指定对象skew transformation（扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0


    *  skewx() x坐标系不动
    *  skewy() y坐标系不动

3d效果

    *  translatez()
    *  translate3d()指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
    *  scalez()
    *  scale3d()


    *  rotatex()
    *  rotatey()
    *  rotatez()

3d效果

    *  translatez()
    *  translate3d()指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
    *  scalez()
    *  scale3d()


    *  rotatex()
    *  rotatey()
    *  rotatez()

### 触发时机
* 伪类选择器
* JS
* 媒体查询

### 可以过渡的属性
* 长度
* 颜色
* 变换


# CSS3 动画
### 相关属性
* animation

<' animation-name '>检索或设置对象所应用的动画名称
<' animation-duration '>：检索或设置对象动画的持续时间
<' animation-timing-function '>：检索或设置对象动画的过渡类型
<' animation-delay '>：检索或设置对象动画延迟的时间
<' animation-iteration-count '>：检索或设置对象动画的循环次数
<' animation-direction '>：检索或设置对象动画在循环中是否反向运动
<' animation-fill-mode '>：检索或设置对象动画时间之外的状态
<' animation-play-state '>：running/pasused 检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

注意：如果只提供一个<time>参数，则为 <' animation-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' animation-duration '> 的值定义，第二个为 <' animation-delay '> 的值定义

### 关键帧
        
        #keyframes 动画名称{
            form{
            }
            to{
            }
        }

 

animation-direction

normal：
    正常方向
reverse：
    反方向运行
alternate：
    动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：
    动画先反运行再正方向运行，并持续交替运行

# CSS3 变形/变换
### 相关属性
* transform
* transform-origin  起点 等同于center center

* transform-style: flat/preserve-3d

指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

• 当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。
• 决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <' transform-style '> 属性。
• 对应的脚本特性为transformStyle。

flat：

指定子元素位于此元素所在平面内

preserve-3d：

指定子元素定位在三维空间内

* perspective: 长度单位 观察者距离
* perspective-origin 观察者起点
* backface-visibialbe: visible/hidden 背面是否可见 在3d里可用

### 变形方法 transform-function
* 2d
    *  translate()    指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
    *  translatex()
    *  translatey()

    * 3d rotate()    指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义  中心点开始从左往右

    *  scale()        指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
    *  scalex()
    *  scaley()
    *
    *  skew()          指定对象skew transformation（扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

    *  skewx() x坐标系不动
    *  skewy() y坐标系不动

 

3d效果

    *  translatez()
    *  translate3d()指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
    *  scalez()
    *  scale3d() 

    *  rotatex()
    *  rotatey()
    *  rotatez()

 

 立方体

 

# CSS过渡
### 相关属性
* trasition
* transition-property              检索或设置对象中的参与过渡的属性
* transition-timing-function    检索或设置对象中过渡的动画类型    

linear：

线性过渡。

ease：

平滑过渡。

ease-in：

由慢到快。

ease-out：

由快到慢。

ease-in-out：

由慢到快再到慢。

* transition-duriation             检索或设置对象过渡的持续时间

* transition-delay                  检索或设置对象延迟过渡的时间

transition:         width ease 1s 1s,
                        height ease 1s 1s;

### 触发时机
* 伪类选择器
* JS
* 媒体查询

### 可以过渡的属性
* 长度
* 颜色
* 变换


# CSS3 动画
### 相关属性
* animation

<' animation-name '>检索或设置对象所应用的动画名称

<' animation-duration '>：检索或设置对象动画的持续时间

<' animation-timing-function '>：检索或设置对象动画的过渡类型

<' animation-delay '>：检索或设置对象动画延迟的时间

<' animation-iteration-count '>：检索或设置对象动画的循环次数

<' animation-direction '>：检索或设置对象动画在循环中是否反向运动

<' animation-fill-mode '>：检索或设置对象动画时间之外的状态

<' animation-play-state '>：running/pasused 检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

注意：如果只提供一个<time>参数，则为 <' animation-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' animation-duration '> 的值定义，第二个为 <' animation-delay '> 的值定义

### 关键帧
        
        #keyframes 动画名称{
            form{
            }
            to{
            }
        }

animation-direction 

normal：

正常方向

reverse：

反方向运行

alternate：

动画先正常运行再反方向运行，并持续交替运行

alternate-reverse：

动画先反运行再正方向运行，并持续交替运行