CSS3动画(animation)

2019-01-08 本文已影响0人陈裔松的技术博客

使元素从一种样式逐渐变化为另一种样式的效果。
手机设备的浏览器在使用CSS3动画时，要加上webkit前缀

animation-name属性

概念：检索或设置对象所应用的动画名称
语法：animation-name: keyframename | none;
参数：keyframename(指定要绑定到选择器的关键帧的名称)，none(没有动画)

div > .inner { background-image: url(images/circle_inner.png);
    // 给元素设定名叫circle_inner的动画
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
}

// 定义动画circle_inner，这个接下来会讲到
@keyframes circle_inner {
    from { transform: rotateX(0deg);   }
    to   { transform: rotateX(360deg); }
}

animation-duration属性

概念：检索或设置对象动画的持续时间
语法：animation-duration: time
参数：time指定动画播放完成花费的时间，默认为0，意味着没有动画效果

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    // 设置动画时间为10s
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
}

animation-timing-function属性

概念：检索或设置对象动画的过渡类型
语法：animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out
参数：
linear => 线性过渡，均匀运动
ease => 平滑过渡，结束比较生硬，默认值
ease-in => 由慢到快，结束比较生硬
ease-out => 由快到慢
ease-in-out => 由慢到快再到慢，这种效果比较人性化

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    // 设置动画效果为线性过渡
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
}

animation-delay属性

概念：检索或设置对象动画的延迟时间
语法：animation-delay: time
参数：定义动画开始前的等待时间，以秒或毫秒计，默认值为0

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    // 设置2s延迟之后再开始动画
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
}

animation-iteration-count属性

概念：检索或设置对象动画的循环次数
语法：animation-iteration-count: infinite | <number>;
参数：<number>为数字，默认是1；inifinite为无限次数循环

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    // 无限循环执行动画
    // 注意delay是动画之外的时间，所以无限循环动画的时候，中间并不会停下来
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

animation-direction属性

概念：检索或设置对象动画在循环中是否反向运动
语法：animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit
参数：
normal => 正常方向
reverse => 反方向运动
alternate => 动画先正常运动再反方向运动，并持续交替运行
alternate-reverse => 动画先反运动再正方向运动，并持续交替运行

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    // 动画先正常运动再反方向运动，并持续交替运行
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
}

animation-fill-mode属性

概念：规定当动画不播放时(当动画完成或动画有延迟未开始播放时)，要应用到的元素的样式
语法：animation-fill-mode: none | forwards | backwards | both
参数：
none => 默认值，不设置对象动画之外的状态；
forwards => 设置对象状态为动画结束时的状态；
backwards => 设置对象状态为动画开始时的状态；
both => 设置对象状态为动画结束或开始时的状态；

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    // 设置对象状态为动画结束时的状态
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}

animation-play-state属性

概念：指定动画是否正在运行或已暂停
语法：animation-play-state: paused | running
参数：paused(指定暂停动画)，running(指定正在运行动画，默认值)

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation-name: circle_inner;
            animation-name: circle_inner;
    -webkit-animation-duration: 10s;
            animation-duration: 10s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    // 强制暂停动画，无论之前写了多少动画，都不会有效果
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

// 当鼠标移入的时候，开始动画
div:hover > div {
    cursor: pointer;
    -webkit-animation-play-state: running;
            animation-play-state: running;
}

animation属性

概念：复合属性。检索或设置对象所应用的动画特效。
语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state
补充1：name和duration是必须的，其他都是可选的
补充2：如果只有一个时间值，那么会认为这个时间值是duration时间
补充3：只有第一个name是固定的，后面的顺序可以跟语法里的不一样

div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation: circle_inner linear 10s infinite;
            animation: circle_inner linear 10s infinite;
}

关键帧

概念：可以指定任何顺序排列来决定Animation动画变化的关键位置
说明1：使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。
说明2：在动画过程中可以通过@keyframes规则多次更改CSS样式的设定

// 使用动画
div > .inner { background-image: url(images/circle_inner.png);
    -webkit-animation: circle_inner linear 10s infinite;
            animation: circle_inner linear 10s infinite;
}

// 定义动画
@-webkit-keyframes circle_inner {
    form   { transform: rotateX(0deg);   }  // 写0%也可以
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }  // 写100%也可以
}
@keyframes circle_inner {
    form   { transform: rotateX(0deg);   }
    25%    { transform: rotateX(45deg);  }
    75%    { transform: rotateX(315deg); }
    to     { transform: rotateX(360deg); }
}

will-change原理

思考：一个网页有好几张背景图片组成，怎样提高性能，滚屏的时候不会卡？
方案：
1，position-fixed代替background-attachment
2，带图片的元素放在伪元素中
3，巧用will-change

下面就来说说will-change

目标：启动GPU，以增强页面渲染性能
概念：提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置
语法：will-change: auto | scroll-position | contents | <custom-ident> | <animateable-feature>
参数：
auto （没有特定的意图，适用于它通常所做的任何优化）
scroll-position （表示将要改变元素的滚动位置）
contents （表示将要改变元素的内容）
<custom-ident> （明确指定将要改变的属性与给定的名称，如transform） => 推荐使用
<animateable-feature> （可动画的一些特征值，比如left，top，margin等 => 不推荐使用

div > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; 
    margin: auto; background-repeat: no-repeat; background-position: center;
    -webkit-transition: transform 10s ease;
       -moz-transition: transform 10s ease;
        -ms-transition: transform 10s ease;
         -o-transition: transform 10s ease;
            transition: transform 10s ease;
}
div:hover {
    // 明确将要改变的属性是transform
    // 放在父级元素的hover上，这样可以提升性能，因为没有hover的时候，就释放GPU了
    -webkit-will-change: transform;
       -moz-will-change: transform;
            will-change: transform;
}

注意：

勿滥用，不能在每个元素上都加上will-change
提前声明
CSS都加载好，当有用户操作的时候触发变化，这是可以的
页面加载时，直接开始动画，这种情况加will-change就没什么用了。因为浏览器都要马上开始动画了，这时候启用GPU已没有多大意义
remove
尽量把will-chang加载hover这种跟用户操作相关的地方。这样用户不操作，就不会启用GPU。