css3动画属性集合

前言

最近学习了css动画属性，感觉蛮吊的，可以实现简单的动画，以后再做一些小场景的动画，可以告别flash软件了，虽然也是好少用到，但是找到了不同方案可以解决问题，是很爽的。所以今天好好总结一下css动画属性，以便自己的知识更加牢靠。

css动画属性结合（animation transform transition）

transform变形属性  (CSS3中的变形处理，实现文字和图像的旋转、缩放、倾斜和移动等)

2d属性值有：
1）指定变形的基准点（在使用transform方法进行文字或图像变形的时候，默认是以元素的中心点为
基准点进行变形的，使用transform-origin属性，可以改变变形的基准点）
语法：
transform-origin：基准点在水平方向上的位置，在垂直方向上的位置；
2）移动动画--translate()方法
语法：
  transform：translate(水平方向的移动距离); 或者
  transform：translate(水平方向的移动距离，垂直方向的移动距离);
注意：参数表示坐标值，第二个参数可选，若省略默认为0px
translate()目前只有Firefox、Safari、Chrome以及Opera10.50+支持，到目前为止没有IE版本支持
3）倾斜动画
语法：
  transform：skew(水平方向的倾斜角度); 或者
  transform：skew(水平方向的倾斜角度，垂直方向的倾斜角度);
4）缩放动画
语法：
  transform：scale(缩放倍率); 或者
  transform：scale(水平缩放倍率， 垂直缩放倍率);
5）旋转动画
rotate()能够旋转指定的元素对象，主要再二维空间内进行操作，接受一个角度参数值，用来指定旋转的幅度，元素对象可以是内联元素和块级元素。
语法：transform:rotate(45deg)；

transform功能的3d变形效果

一、旋转
      语法：
       transform：rotateX(45deg);
       transform：rotateY(45deg);
       transform：rotateZ(45deg);
       或者：
       transform：rotateX(45deg) rotateY(45deg) rotateZ(45deg);
3D变形可以实现元素在X轴、Y轴、Z轴方向上的旋转、缩放、倾斜以及移动变形处理
二、缩放
      语法：
       transform：scaleX(0.5);
       transform：scaleY(1);
       transform：scaleZ(2);
       或者：
       transform：scaleX(0.5) scaleY(1) scaleZ(2);
3D变形可以实现元素在X轴、Y轴、Z轴方向上的旋转、缩放、倾斜以及移动变形处理
三、倾斜
      语法：
       transform：skewX(45deg);
       transform：skewY(45deg);        
z轴和2D效果类似
四、移动
      语法：
       transform：translateX(50px);
       transform：translateY(100px);
       transform：translateZ(20px);
3D变形可以实现元素在X轴、Y轴、Z轴方向上的旋转、缩放、倾斜以及移动变形处理

注意：

perspective属性相对于观众产生一个3D场景，俗称井深，你看3D物体，眼睛到画布的距离。正确的用法是他需要应用到变形元素的祖先元素上。perspective-origin为视点的位置。

Perspective:none|number 一般设置为祖先元素上

与之搭配的是transform-style: preserve-3d; 注意该属性是放在需要3d变形的元素上。

transition动画过渡属性（CSS3中的动画功能，通过一个属性值平滑过渡到另一个属性值来实现）

语法：
transition:property   duration   timing-function   delay;
          property:表示对哪个属性操作
duration：表示在多久时间内完成属性值的平滑过渡
timing-function:表示通过什么方法平滑过渡
          delay:表示延迟多长时间开始执行特效
分别对应三个属性：
transition-property、transition-duration、transition-timing-functon、transition-delay

注意：定义过渡效果
transition-timing-function属性用来定义过渡动画的效果。
transition-timing-function属性的初始值为ease,适用于所有元素以及:before和:after伪元素。取值简单说明如下：
ease : 缓解效果
linear ：线性效果
ease-in：渐显效果
ease-out：渐隐效果
ease-in-out：渐显渐隐效果
cubic-bezier:特殊的立方贝塞尔曲线效果

animation帧动画属性（CSS3中的动画功能，通过在样式中创建多个关键帧，在这些关键帧中编写样式，并且能够在页面上综合运行这些关键帧来实现较为复杂的动画）

animation-name:指定关键帧集合的名称
animation-duration：指定完成整个动画需要的时间
animation-timing-function:指定实现动画的方法
animation-delay：指定延迟多少秒或多少毫秒后开始执行动画
animation-iteration-count：指定动画的执行次数，可指定为infinite
animation-direction：指定动画执行方向，可指定属性值包括：
nomal:初始值（动画执行完毕后返回初始状态）
alternate:交替更改动画的执行方向（假如动画循环反复的，一直是0%到100%。但这个属性达到这种效果，0%-100% 100%-0%）
reverse:反方向执行动画（假如动画是0%到100%，则它执行的方向是100%先执行后执行至0%）
alternate-reverse:从反方向开始交替更改动画的执行方向（结合以上的属性的效果的综合）
animation-play-state:规定动画是否在运行或暂停 paused running
animation-fill-mode:规定对象动画时间之外的状态

综合书写方式：
animation：keyframe的名称   动画的执行时长   延迟多少秒后开始执行动画   动画的实现方法      动画的执行次数   动画的执行方向  当前动画运行状态 动画执行完毕后的状态

动画效果，请转移至我另css动画属性实现效果。大神就越过了

生活寄语

爱代码，爱上生活！