模拟呼吸灯 CSS3 @keyframes 学习

CSS3 @keyframes 学习

1. 通过 @keyframes 规则，够创建一组动画。
2. 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
3. 0% 是动画的开始时间，100% 动画的结束时间
4. @keyframes 的兼容性比较差可以使用对应的关键词替换

语法

@keyframes animationname {keyframes-selector {css-styles;}}

呼吸灯效果

  <div class="content">
    <div class="breathe">
    </div>
  </div>

.content {
  width: 100%;
  height: 100vh;
  background: #1e1e1e;
  padding-top: 100px;
}
.breathe {
  margin: 0 auto;
  height: 20px;
  width: 20px;
  background: #0f9;
  border-radius: 50px;
  box-shadow: 0px 0px 5px #0f9;
  animation: fadeIn 4s infinite linear;
}
@keyframes fadeIn {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0; /*初始状态 透明度为0*/
  }
  50% {
    width: 20px;
    height: 20px;
    opacity: 1; /*中间状态 透明度为1*/
  }
  100% {
    width: 10px;
    height: 10px;
    opacity: 0; /*结尾状态 透明度为0*/
  }
}
@-moz-keyframes fadeIn /* Firefox */ {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0; /*初始状态 透明度为0*/
  }
  50% {
    width: 20px;
    height: 20px;
    opacity: 1; /*中间状态 透明度为1*/
  }
  100% {
    width: 10px;
    height: 10px;
    opacity: 0; /*结尾状态 透明度为0*/
  }
}

@-webkit-keyframes fadeIn /* Safari 和 Chrome */ {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0; /*初始状态 透明度为0*/
  }
  50% {
    width: 20px;
    height: 20px;
    opacity: 1; /*中间状态 透明度为1*/
  }
  100% {
    width: 10px;
    height: 10px;
    opacity: 0; /*结尾状态 透明度为0*/
  }
}

@-o-keyframes fadeIn /* Opera */ {
  0% {
    width: 10px;
    height: 10px;
    opacity: 0; /*初始状态 透明度为0*/
  }
  50% {
    width: 20px;
    height: 20px;
    opacity: 1; /*中间状态 透明度为1*/
  }
  100% {
    width: 10px;
    height: 10px;
    opacity: 0; /*结尾状态 透明度为0*/
  }
}