乐趣区

关于前端:CSS3-中的动画

制作动画分两步:定义动画和应用动画。

1、keyframes 定义动画

  /* widen 是动画名称,能够依据本人的须要命名 */
  @keyframes widen {
     0%{width: 100px;} 
    100%{width: 200px;}
  }

0% 是动画的开始,100% 是动画的实现。这样的规定就是 动画序列 。咱们能够用多个百分比来规定变动产生的工夫,比方 25%、50% 等,或者用关键词 fromto,等同于 0% 和 100%。

@keyframes 中规定某项 CSS 款式,就能创立由以后款式逐步变为新款式的动画成果。

2、元素应用动画

  div {
    width: 100px;
    height: 100px;

    /* 动画名称:widen(必写项)*/
    animation-name: widen;

    /* 实现一个周期动画须要破费的工夫(必写项)*/
    animation-duration: 5s;

    /* 动画的速度曲线,默认 ease */
    animation-timing-function: ease;

    /* 动画何时开始,默认是 0 */
    animation-delay: 2s;

    /* 动画播放的次数,默认是 1,infinite 是有限循环 */
    animation-iteration-count: infinite;

    /* 动画是否在下一周期逆向播放,默认是 normal,alternate 是逆播放 */
    animation-direction: alternate;

    /* 动画是否正在运行或暂停,默认是 running,pause 是暂停 */
    animation-play-state: running;

    /* 动画完结后放弃以后状态(forwards)或者回到起始状态(backwards)*/
    animation-fill-mode: forwards;
  }

以上的动画属性能够简写为:

  animation: widen 5s ease 2s infinite alternate forwards;

简写的属性外面不蕴含 animation-play-state,暂停动画通常和鼠标通过等事件配合应用。

3、动画曲线

动画曲线与 transition 中的静止曲线统一:linear(匀速)、ease(逐步慢下来)、ease-in(减速)、ease-out(加速)、ease-in-out(先减速后加速)。

除了这些,动画曲线中还有一种自定义的曲线 steps,指定了工夫函数中的距离数量(也就是分几步来实现动画)。

  @keyframes move {
     0%{left: 0px;} 
    100%{left: 200px;}
  }
  div {
    position: absolute;
    width: 100px;
    height: 100px;
    anmition: move 4s steps(5) forwards;
  }

下面例子中,div 盒子用 4 秒的工夫从左向右挪动 200px,steps 为 5,那么每步的工夫是 4/5 = 0.8s,也就是每 0.8s 挪动 40px,5s 正好挪动 200px。

如果咱们要为元素增加多个动画,能够用 逗号 分隔。

  animation: widen 5s ease alternate forwards, move 4s steps(5) forwards;
退出移动版