重学前端之CSS(四)CSS过渡与动画

这一篇文章的主要介绍的是CSS过渡和动画的相关属性。

CSS过渡

一、定义
transition属性: 可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。IE10支持，需要使用前缀-ms-。

二、transition属性说明
  1) transition-property: 指定CSS属性的name,transition效果(要进行过渡的CSS属性)
  2) transition-duration: transition效果需要指定多少秒或毫秒才能完成
  3) transition-timing-function: 指定transition效果的转速曲线,也就是过渡时以什么速度进行过渡
    其值为:
      a.linear: 匀速
      b.ease: 慢 -- 快 -- 慢
      c.ease-in: 以慢开始
      d.ease-out: 以慢结束
      e.ease-in-out: 以慢速开始和结束
      f.cubic-bezier(n,n,n)：在cubic-bezier函数中定义自己的值,可能的值是0至1之间的数值 (贝塞尔曲线调试网站: https://cubic-bezier.com )
  4) transition-delay: 定义transition效果开始的时候,也就是延迟多少秒后开始动画

三、语法
  transition的语法: transition: property duration timing-function delay; 默认值为 transition: all 0 ease 0。
例:

.btn {
    width: 300px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    margin: auto;
    background-color: yellowgreen;
    transition: all .5s ease 0s;
}

.btn:hover {
    background-color: lightblue;
    border-radius: 50px;
}

参考内容:
  菜鸟教程--CSS3transition属性
  CSS3transition-timing-function属性

CSS动画

一、animation定义
  animation: 用来指定一组或多组动画，每组之间用逗号相隔。它是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。IE10支持。

二、animation语法
  animation简写语法: animation: name duration timing-function delay iteration-count direction。默认值为 animation: none 0 ease 0 1 normal。

三、animation属性说明
  1) animation-name: 绑定到选择器的keyframe名称
  2) animation-duration: 完成动画所需要花费的时间,以秒或毫秒计
  3) animation-timing-function: 动画的速度曲线，和transition-timing-function的取值一致
  4) animation-delay: 在动画开始之前的延迟
  5) animation-iteration-count: 规定动画应该播放的次数 (infinite)
  6) animation-direction: 规定是否应该轮流反向播放动画 (normal: 默认值,正常播放; reverse: 动画反向播放; alternate: 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放)

四、@keyframes规则的定义
  @keyframes规则: 通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。帧数可以为百分比、from(等效于0%)、to(等效于100%)。IE10支持。

五、完整动画的使用案例

@keyframes show {
    20% {
        opacity: .3;
    }

    40% {
        border-radius: 50px;
    }
    60% {
        background-color: yellow;
    }
}

/* transition 和 animation可以组合使用 */
@keyframes move {
    0% {
        left: -300px;
        transition: left ease;
    }
    50% {
        left: 150px;
        transition: left linear;
    }
    100% {
        left: 0px;
        transition: left ease-out;
    }
}

.btn1 {
    animation: show 1s linear 1s infinite;
}

  注: 重复定义的关键帧中，如果属性不同则会都生效，如果属性相同的话，那么以最后一次定义的属性为准。在关键帧中出现的!important关键词的属性将会被忽略。
参考内容:
  W3school---CSS3 animation 属性
  MDN--@keyframes

CSS动画优化

• 只允许改变transform、opacity，其它属性不要动，避免重新计算布局（reflow）
• 对动画元素应用transform: translate3d(0, 0, 0)、will-change: transform等，开启硬件加速
• 动画元素尽量用fixed、absolute定位方式，避免reflow
• 对动画元素应用高一点的z-index，减少复合层数量

来源: css动画与gpu
推荐阅读:
  CSS3 动画卡顿性能优化的完美解决方案
  用CSS开启硬件加速来提高网站性能（转）

以上内容如有不对,希望大家指出,谢谢。