css 脉冲动画css

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 脉冲动画css相关的知识，希望对你有一定的参考价值。

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    -ms-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

以上是关于css 脉冲动画css的主要内容，如果未能解决你的问题，请参考以下文章

css 脉冲动画css

使用 CSS3 Transform Scale 和 jQuery 动画脉冲效果

css 脉冲动画按钮（悬停和焦点）

如何使用 -webkit-animation - 外环创建脉冲效果

svg 元素上的灯光动画

css 径向脉冲