CSS3动画详解

一. CSS3 转换：transform
    Internet Explorer 10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webkit-。Opera 仍然不支持 3D 转换（它只支持 2D 转换）。这里只介绍2D转换的方法。
   （1）作用：实现元素的转换，对元素进行旋转、缩放、移动以及倾斜
   （2）兼容性：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。需要用兼容性写法
   （3）兼容性写法：以rotate为例：
         transform: rotate(30deg);
         -ms-transform: rotate(30deg); /* IE 9 */
         -webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
   （4）语法：
        transform:none(默认值，元素不进行转换)/transform-function（表示一个或者多个转换函数，中间以空格分开）;例transform:rotate(90deg) scale(0.8);变化的只是该元素本身状态，不会使其位置和其他元素发生变化
        transform-origin转换的原点：用来指定元素的转换原点位置，默认情况下，转换的原点在元素的中心点，或者是X轴或Y轴的50%处。取值有：数字/百分比/关键字（left、top、right、bottom）；
一个值：表示所有轴的位置
两个值：表示X轴和Y轴
三个值：表示X轴、Y轴和Z轴
   （5）具体方法
       1.translate() 方法
       通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。如果只取一个值，则表示X轴上移动多少，如果要让在X轴和Y轴上都发生移动，需要设置两值，中间用逗号隔开，如：translate（X）或者translate（X,Y），可取值：数值、百分比，也可以是负值。另外，虽然元素从视觉上发生了移动，但是本身占据的位置是没有变化的。也可使用单向位移函数translateX（）或translateY（）
       实例：值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
  2.rotate() 方法
旋转，通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
实例：值 rotate(30deg) 把元素顺时针旋转 30 度。
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
  3.scale() 方法
缩放，通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，取一个值表示X轴和Y轴都进行相同的缩放。scale取值只能是倍数缩放，默认为1，值为0~1之间的数值表示缩小，为大于1的数值表示放大。可以使用单向缩放函数scaleX（X）和scaleY（Y）
实例:值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
  4.skew() 方法
倾斜，以原点位置，围绕X轴和Y轴按照一定的角度倾斜，可能会改变元素的形状。值是一个角度，角度为90度时只有一条线。只有一个值时表示在X轴发生变化，两个值则表示在X轴和Y轴都发生变化。也可以使用单向倾斜函数skewX（x）和skewY（y）。角度值X轴上是向左移动，Y轴上是向上移动。
实例：值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
注：向transform添加多个方法，不同方法间用空格隔开，如：transform:rotate(70deg) scale(2,4);
二、CSS3 过渡：transition
   （1）作用：在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果，使得CSS的属性值在一段时间内平滑的过渡。
   （2）兼容性：Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。Internet Explorer 9 以及更早的版本，不支持 transition 属性。Chrome 25 以及更早的版本，需要前缀 -webkit-。
   （3）触发过渡：
通过用户的行为触发，如点击、悬浮等
由元素的状态变化触发  :hover\:active\:focus等
由JavaScript代码触发
   （4）兼容性写法：
        向宽度、高度和转换添加过渡效果：
<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}


div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
（5）过渡子属性：
过渡属性transition-property:规定应用过渡效果的css属性的名称，当指定的css属性改变时，过渡效果将开始。语法transition-property:none|all|property;
         可以设置过渡的属性：颜色属性、取值为数值的属性(border，width等）、转换属性、渐变属性、visibility属性、阴影属性
         过渡时间transition-duration：规定完成过渡效果需要花费的时间，以秒或毫秒计。语法transition-duration:s|ms; 默认值是0，意味着不会有效果，必须设置transition-duration属性，否则时长为0，就不会产生过渡效果，
transition-timing-function过渡函数，过度曲线，实现的是匀速还是加速变化，取值为预定义函数或贝塞尔曲线
语法：transition-timing-function:function；
预定义函数：
ease：默认值，慢速开始，快速变快，然后慢速结束
linear：以相同速度开始至结束
ease-in：以慢速开始，加速效果
ease-out：以慢速结束，减速效果
ease-in-out：以慢速开始和结束，先加速再减速
过渡延迟transition-delay：规定过渡效果何时开始，鼠标指上去要过一段时间才发生变化，鼠标离开后也要过段时间才发生变化，以秒或毫秒计。语法：transition-delay:s|ms;
    （6）简写：
transition:property（属性） duration（变换时间） timing-function（变换是否迅速还是什么） delay（触发事件是否延迟）;属性和持续时间是必须写的。可以同时过渡多个属性，中间用逗号隔开。分开写的时候，如果值相同就写一个值。transition可以视具体情况加在合适位置，不一定非得和里面的transform属性在一个东西里面。
两种写法，如：
方法一：
transition:transform 5s linear,
background 5s linear;
方法二：
transition-property：transform,background;
transition-duration:5s;
transition-timing-function:linear;   
   注：向多个样式添加过渡效果，请添加多个属性，由逗号隔开，如：transition:width 2s, height 2s;过渡属性可以用all（所有属性），这样表示过渡的其他值是相同的，最好是想让那个属性发生变化加all，要不然所有的属性都会发生变化。
三、CSS3 动画: animation
   （1）作用：使元素从一种样式逐渐变化为另一种样式的效果。
   （2）兼容性：Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
   （3）兼容性写法：
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
    注：必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
   （4）步骤：
1、声明动画：创建一个已命名的动画，使用动画的关键帧。不能同时定义群组@keyframes，但是一个动画可以同时被调用多次。不是选择器  如：@keyframes name(动画名字，别取中文和纯数字就行){}
2、为元素调用动画：对元素使用animation属性调用动画，设置动画的播放时间、播放次数等，
如:animation:change 3s;
    （5）动画子属性：
         animation-name：调用动画的名称
         animation-duration：动画完成一个周期的时间
         animation-timing-function：动画的速度曲线，取值为预定于函数，如ease、linear、ease-in、ease-out、
         ease-in-out，可以为贝塞尔曲线
         animation-delay：延迟播放时间
         animation-iteration-count：播放次数，取值为数值或infinite（无限次播放）
         animation-direction：动画播放方向，取值为normal（默认值）或alternate（轮流播放，动画会在奇数次数正常播放，偶数次数向后播放）
    （6）animation简写：
         animation:name duration timing-function delay iteration-count direction;
    （7）animation-play-state属性：规定动画正在运行还是暂停，常用于结合JavaScript代码使用，实现在播放过程中暂停动画，可取值有paused（动画暂停）和running（动画播放），hover paused、默认 running可以实现鼠标滑过动画暂停，离开继续播放。实现鼠标滑过动画暂停，离开继续播放
         animation-fill-mode属性：规定动画在播放之前或之后，其动画效果是否可见。可取值：none（不改变默认行为）、forwards（当动画完成后，保持最后一个属性值，在最后一个关键帧中定义）、backwards（在动画显示之前，显示第一帧，在第一个关键帧中定义）、both（动画开始前显示第一帧，最后保持最后一帧，向前和向后填充模式都被应用）
    （8）格式
      动画 animation
      关键帧：@keyframes name{
         from {
            第一帧的属性
         }
         percent(百分比) {
            中间帧的属性
         }
         to {
            最后一帧的属性
         }
              }
      
      


动画案例：
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;


position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}


@keyframes mymove
{
from {left:0px;top:0px;background:red;}
50% {left:250px;top:150px;background:#D800FF;transform:rotate(70deg) scale(2,4);}


to {left:500px;top:0px;background:#FF5900;transform:rotate(130deg) scale(0.5);}
}


@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;background:red;}
50% {left:250px;top:150px;background:#D800FF;-webkit-transform:rotate(70deg) scale(2,4);}


to {left:500px;top:0px;background:#FF5900;-webkit-transform:rotate(130deg) scale(0.5)}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
<div>ABCD</div>
</body>
</html>