CSS3过渡与动画

一、CSS3 过渡

• transition-property

　　　规定过渡效果的 CSS 属性名

   -webkit-transition-property: none / all / property;
      -moz-transition-property: none / all / property;
       -ms-transition-property: none / all / property;
        -o-transition-property: none / all / property;
           transition-property: none / all / property;
/*参数说明
- none
- all，默认值
- property(CSS属性名) 例如color、opacity...*/

• transition-duration

　　　规定完成过渡效果需要多少时间

transition-duration: time;
/*参数说明
- 规定完成过渡效果需要花费的时间（以秒或毫秒计）
- 默认值是 0*/

• transition-timing-function

　　　规定速度效果的速度曲线

transition-timing-function: ease / linear / ease-in / ease-out / ease-in-out
                            step-start / step-end / steps(<integer>, [ start / end ])
                            cubic-bezier(<number>, <number>, <number>, <number>);
/*参数说明
− linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
− ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
− ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
− ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

− ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)（最佳效果）

− step-start：等同于 steps(1, start)
− step-end：等同于 steps(1, end)
− steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数
                                         第一个参数：必须为正整数，指定函数的步数
                                         第二个参数：取值可是start或end，指定每一步的值发生变化的时间点
                                         第二个参数：可选，默认值为end
− cubic-bezier(<number>, <number>, <number>, <number>)：
  特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内*/

• transition-delay

　　　定义过渡效果何时开始

transition-delay: time;
/*参数说明
- 指定秒或毫秒数之前要等待切换效果开始
- 默认值是 0*/

• transition复合写法

transition: property duration timing-function delay;

• 实际应用

div
{
    width:100px;
    height:75px;
    background:#0b2632;
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:ease-in-out;
    transition-delay:0.5s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:ease-in-out;
    -webkit-transition-delay:0.5s;
}

div:hover
{
    width:200px;
}

二、CSS3 动画

• Keyframes

　　　关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置

@keyframes animationname {
   keyframes-selector {
       css-styles;
   }
}

/*参数说明
 animationname：必写项，定义animation的名称
 keyframes-selector：必写项，动画持续时间的百分比，0-100%、from (0%)、to (100%)
 css-styles：必写项，一个或多个合法的CSS样式属性
 @keyframes animationname在style中单独写入
*/

• animation-name

　　　规定需要绑定到选择器的 keyframe 名称

animation-name: keyframename / none;

/*参数说明
 keyframename：指定要绑定到选择器的关键帧的名称；
 none：指定有没有动画（可用于覆盖从级联的动画）
*/

• animation-duration

　　　规定完成动画所花费的时间，以秒或毫秒计

animation-duration: time;

/*参数说明
 time指定动画播放完成花费的时间。默认值为 0，意味着没有动画效果
*/

• animation-timing-function

　　　规定动画的速度曲线

animation-timing-function: ease / linear / ease-in / ease-out / ease-in-out
                            step-start / step-end / steps(<integer>, [ start / end ])
                            cubic-bezier(<number>, <number>, <number>, <number>);
/*参数说明
− linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
− ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
− ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
− ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

− ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)（最佳效果）

− step-start：等同于 steps(1, start)
− step-end：等同于 steps(1, end)
− steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数
                                         第一个参数：必须为正整数，指定函数的步数
                                         第二个参数：取值可是start或end，指定每一步的值发生变化的时间点
                                         第二个参数：可选，默认值为end
− cubic-bezier(<number>, <number>, <number>, <number>)：
  特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内*/

• animation-delay

　　　规定在动画开始之前的延迟

animation-delay: time;

/*参数说明
 可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0
 如果值为负，则动画马上开始，但会跳过相应的时间进入动画
*/

• animation-iteration-count

　　　规定动画应该播放的次数

animation-iteration-count: infinite / <number>;

/*参数说明
 <number>为数字，其默认值为“1”；infinite为无限次数循环
*/

• animation-direction

　　　规定是否应该轮流反向播放动画

animation-direction: normal / reverse / alternate / alternate-reverse / initial / inherit;

/*参数说明
 normal：正常方向
 reverse：反方向运行
 alternate：先正后反，并持续交替运行（需依赖infinite）
 alternate-reverse：先反后正，并持续交替运行（需依赖infinite）
*/

• animation-fill-mode

　　　规定当动画完成或当动画有延迟未开始播放时，要应用到元素的样式

animation-fill-mode: none / forwards / backwards / both / initial / inherit;

/*参数说明
 none：默认值。不设置对象动画之外的状态
 forwards：设置对象状态为动画结束时的状态
 backwards：设置对象状态为动画开始时的状态
 both：设置对象状态为动画结束或开始的状态
*/

• animation-play-state

　　　规定动画运行或暂停

animation-play-state: paused / running;

/*参数说明
 paused：指定暂停动画
 running：默认值，指定正在运行的动画
*/

• animation

　　　复合写法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

/*参数说明
 默认写在前面的时间为duration
*/

• will-change

　　　增强页面渲染性能，提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置

will-change: auto / scroll-position / contents / <custom-ident> / <animateable-feature>;

/*参数说明
 auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化
 scroll-position：表示将要改变元素的滚动位置
 contents：表示将要改变元素的内容
 <custom-ident>：明确指定将要改变的属性与给定的名称
 <animateable-feature>：可动画的一些特征值，比如left、top、margin等
*/

兼容性：IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+

• 实际应用

div
{
    width:100px;
    height:100px;
    background:black;
}

div:hover
{
            animation:myfirst 5s;
         -o-animation:myfirst 5s; /* Opera */
       -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
    0%   {background:black;}
    25%  {background:blue;}
    50%  {background:red;}
    100% {background:white;}
}

@-moz-keyframes myfirst /* Firefox */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
    0%   {background:red;}
    25%  {background:yellow;}
    50%  {background:blue;}
    100% {background:green;}
}