通过CSS Animation进行前端动效-css教程-PHP中文网

通过CSS Animation进行前端动效

不言

发布： 2018-07-10 17:07:13

原创

2001人浏览过

这篇文章主要介绍了关于通过css animation进行前端动效，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

前言

对于简单的补间动画，我们可以通过transition实现。那到底多简单的动画适合用transtion来实现呢？答案就是——我们只需定义动画起始和结束帧的状态的动画。一旦关键帧数大于2时，我们必须转向CSS Animation了。本文为这段时间学习的记录，欢迎拍砖。

简单粗暴介绍CSS Animation 规则和属性

定义关键帧动画

语法：

@keyframes <animation> {
  [<animation> {
    /* CSS Properties */
  }]*
}</animation></animation>

登录后复制

示例：

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

登录后复制

注意项：
1.<animation name></animation>的命名规范

// 命名需要遵循以下规则
const rIsInvalid = /^--|^[0-9]+-|^(?:unset|initial|inherit|none)$/
    , rIsValid = /^[0-9a-z-_\\]+$/i
function isValidAnimationName(animationName: string): boolean{
  return !rIsInvalid.test(animationName) &amp;&amp; rIsValid(animationName)
}

登录后复制

2.<animation time offset></animation>取值
0-100%、from，等价与0%、 to，等价与100%。
3.<animation name></animation>重复怎么办
@keyframes CSS规则不支持层叠样式，因此当出现多个同名keyframes，那么仅最后出现的那个有效。

/* 无效 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* 生效 */
@keyframes rotate {
  from { transform: rotate(90deg); }
  to { transform: rotate(-360deg); }
}

登录后复制

4.<animation time offset></animation>重复怎么办
与@keyframes CSS规则一样，标准规定相同的关键帧不产生层叠，仅最后出现的认定为有效。
但实际上FireFox14+和Chrome均将关键帧设计为可层叠的。

@keyframes rotate {
  from { transform: rotate(0deg); }
  from { background: red; }
  /* 上述两条time offset实际上等价于
   * from { transform: rotate(0deg); background: red; }
   */
  to {
    transform: rotate(360deg);
    background: yellow;
  }
}

登录后复制

5.!important导致属性失效
一般情况下使用!important会让CSS属性获得最高权重，但在@keyframes下却会导致该CSS属性失效。

@keyframes rotate {
  from {
    transform: rotate(90deg);
    background: red!important; /* background属性无效 */
  }
  to { transform: rotate(-360deg); }
}

登录后复制

6.必须提供至少两个关键帧

/* 不会根据缓动函数产生动画效果，而是在动画持续时间的最后瞬间移动过去 */
@keyframes move-left{
   to {
       left: 100px;
   }
}

登录后复制

使用动画

<css-selector> {
  animation: <animation-name>
             <animation-duration>
             <animation-timing-function>
             <animation-delay>
             <animation-iteration-count>
             <animation-direction>
             <animation-fill-mode>
             <animation-play-state>;
}</animation-play-state></animation-fill-mode></animation-direction></animation-iteration-count></animation-delay></animation-timing-function></animation-duration></animation-name></css-selector>

登录后复制

示例：

.box.rotate {
  animation: rotate 10s infinite alternate;
}

登录后复制

子属性介绍

<animation-name></animation-name>，指定通过@keyframes定义的补间动画名称。
<animation-duration></animation-duration>，动画持续时长，默认为0s。单位为s和ms。
<animation-delay></animation-delay>，动画播放延迟，默认为0s。单位为s和ms。
<animation-iteration-count></animation-iteration-count>，动画重复播放次数，默认为1，infinite表示无限循环。动画播放总时长为*<animation-iteration-count></animation-iteration-count>。
<animation-direction></animation-direction>，可选值为normal | reverse | alternate | alternate-reverse，分别表示动画播放顺序是从from到to，从to到from，从from到to再从to到from和从to到from再从from到to。注意：设置alternate|alternate-reverse时，animation-iteration-count必须大于1才能看到效果
<animation-fill-mode></animation-fill-mode>，可选值为none | forwards | backwards | both，用于设置动画开始前和结束后是否应用0%和100%的样式对元素上。分别表示不应用，应用100%的样式，延迟播放期间应用0%的样式和0%和100%的样式均应用。
注意：

默认情况下(none)，动画结束后会恢复动画前的样式；
设置backwards时，值大于0才能看到效果。

缓动函数-`step`解疑专题

step-start实际上等价于steps(10, start)，而step-end则等价于steps(10)，所以我们只要理解好steps(<integer>, <flag>)</flag></integer>即可。

/* 通过设置在一个动画周期内(<animation-duration>)的平均刷新帧数，实现突变动效。具体应用有：游戏精灵行走、打字效果等
 * <number_of_steps> - 两个关键帧间的刷新次数
 * <direction> - 方向，可选值为 end | start。
 *               end为默认值，表示动画一结束，动画效果就结束;
 *               start表示动画一开始就马上执行完第一个关键帧的效果。
 */
steps(<number_of_steps>, <direction>)</direction></number_of_steps></direction></number_of_steps></animation-duration>

登录后复制

从张旭鑫那偷来的解释：
start：表示直接开始。也就是时间才开始，就已经执行了一个距离段。于是，动画执行的5个分段点是下面这5个，起始点被忽略，因为时间一开始直接就到了第二个点：
1513643914-5b44694cb0dfd_articlex[1].png end：表示戛然而止。也就是时间一结束，当前距离位移就停止。于是，动画执行的5个分段点是下面这5个，结束点被忽略，因为等要执行结束点的时候已经没时间了：
3461688874-5b44694caf26e_articlex[1].png

另外通过将<animation-fill-mode></animation-fill-mode>设置为forwards，那么当<direciton></direciton>设置为end时，也会显示(保持)动画最后一个关键帧的样式。

事件

const target = document.getElementById("target")
target.addEventListener("animationstart", e =&gt; {
  // 动画开始时触发
})
target.addEventListener("animationiteration", e =&gt; {
  // 每次重复执行动画时触发
  // 当<animation-iteration-count>为1时，不会触发。
})
target.addEventListener("animationend", e =&gt; {
  // 当动画结束时触发
})</animation-iteration-count>

登录后复制

搞尽脑汁实现重播效果

到这里我们已经可以通过@keyframes定义和应用CSS Animation了，但我们能否获取对动画效果更多的控制权呢？如开始、暂停、继续、重播。通过<animation-play-state></animation-play-state>我们能轻易实现开始、暂停和继续的效果，但重播却没那么容易。

function pause (target: HTMLElement):boolean {
  const isRunning = target.style.animationPlayState == "running"
  if (isRunning) {
    target.style.animationPlayState = "paused"
  }
  
  return isRunning
}

function play (target: HTMLElement):boolean {
  const isStop = target.style.animationPlayState == "paused"
  if (isStop) {
    target.style.animationPlayState = "running"
  }
  
  return isStop
}

function replay (target: HTMLElement, animationClassName: string):void {
  // 先移除动画效果
  target.classList.remove(animationName)
  // requestAnimationFrame的回调函数会在下一次界面渲染前执行
  requestAnimationFrame(_ =&gt; {
    // 这时动画的影响还在，所以要等界面渲染完后再重新启用动画效果，才能实现重播
    requestAnimationFrame(_ =&gt; {
      target.classList.add(animationName)
    })
  })
}

登录后复制