产品说，我需要灯泡发光效果，实现这个需求有点难，发光效果挑战难度有点大，但还是可以实现。

在开始本文之前主要会会涉及以下知识

• css3 的动画侦
• 写一个动画，模拟一个发光效果

正文开始...

keyframes 关键帧

在开始动画之前，我们需要了解动画桢keyframes,能够控制动画序列的步骤

比如我们需要一个淡入淡出,且文字颜色会逐渐变化

@keyframes fadeOut {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.3;
    color: red;
  }
  40% {
    opacity: 0.5;
    color: aqua;
  }
  60% {
    opacity: 1;
    color: green;
  }
  80% {
    opacity: 0.5;
    color: palegreen;
  }
  90% {
    opacity: 0.3;
    color: blue;
  }
  100% {
    opacity: 0;
    color: cadetblue;
  }
}

我们看到@keyframes name这个name就是动画名称，并且在动画桢中我们是使用0%～100%

使用该动画

.fadeout {
  animation: fadeOut 1s infinite;
}

<div id="app">
  <div class="fadeout">Web技术学苑</div>
</div>

我们看到这个动画就在一直不停的循环

循环动画animation-iteration-count:infinite

我们看到css3的动画桢一直在执行，主要是因为infinite这个属性的设置，并且animation: fadeOut 1s infinite

@keyframes itemAni {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(-60px);
  }
}
.item-wrap {
  height: 30px;
  overflow: hidden;
}
.item {
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.item:nth-of-type(2n) {
  background-color: red;
}
.item:nth-of-type(2n + 1) {
  background-color: pink;
}
.item-wrap .item {
  animation: itemAni 2s infinite;
}

<div class="item-wrap">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

animation-duration 动画的时长

@keyframes fadeLeft {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: 0;
  }
}
.text {
  animation-name: fadeLeft;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

<div class="text">欢迎关注公众号：Web技术学苑</div>

animation-delay 延时动画

如果我想让一个动画延时多少秒才开始执行,那么你只需要设置animation-delay就行

.text {
  animation-name: fadeLeft;
  animation-duration: 3s;
  animation-delay: 4s; // 延迟4s后才开始执行
  animation-iteration-count: ease;
}

animation-play-state 暂停动画

• 暂停动画,animation-play-state:paused

.text {
  animation-name: fadeLeft;
  animation-duration: 3s;
  animation-delay: 4s;
  animation-iteration-count: ease;
}
.text:hover {
  animation-play-state: paused;
}
.text:active {
  animation-play-state: running;
}

监听动画的事件

var textDom = document.querySelector(".text");
textDom.addEventListener(
  "animationstart",
  function () {
    console.log("animationstart");
  },
  false
);
textDom.addEventListener(
  "animationend",
  function () {
    console.log("animationend");
  },
  false
);
textDom.addEventListener(
  "animationiteration",
  function () {
    console.log("animationiteration");
  },
  false
);

发光效果

@keyframes light {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0);
  }
}
.bulb {
  position: relative;
  font-size: 50px;
  display: inline-block;
  width: 50px;
  height: 50px;
  z-index: 2;
}
.bulb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  filter: blur(10px);
  display: inline-block;
  z-index: 1;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(#feffbe 25%, transparent 100%);
  animation: light 5s ease infinite;
}

<div>
  <span class="bulb">💡</span>
</div>

我们用一个伪类去模拟发光，并且用了filter:blur(10px)来模糊背景，在背景设置上使用了一个radial-gradient径向渐变,从一开始的缩小，然后放大，最后再缩小模拟一个放光的效果

差强人意，一个发光的效果就已经实现了

总结

• 主要了解 css3 的动画桢keyframes,以及动画延时animation-delay，animation-play-state属性可以暂停动画

• css3 动画除了关键帧，还需要animation驱动动画桢的执行

• 写了几个例子深刻了解keyframes的动画

• code example