在页面加载时启动 CSS 动画 [重复]

Posted 2023-03-06

【中文标题】在页面加载时启动 CSS 动画 [重复]

【英文标题】：start CSS animation on page load [duplicate]

【发布时间】：2016-04-22 08:57:06

【问题描述】：

是否可以在页面加载时启动 css 动画。目前它只适用于悬停、焦点和活动状态。动画会导致项目摆动，但我希望它自动且持续地发生。

css如下：

@-webkit-keyframes hvr-bob 
  0% 
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  

  50% 
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  

  100% 
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  


@keyframes hvr-bob 
  0% 
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  

  50% 
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  

  100% 
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  


@-webkit-keyframes hvr-bob-float 
  100% 
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  


@keyframes hvr-bob-float 
  100% 
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  


.hvr-bob 
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;

.hvr-bob:before, .hvr-bob:focus, .hvr-bob:active 
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;

【参考方案1】：

改变这一行

.hvr-bob:before, .hvr-bob:focus, .hvr-bob:active 

到这里

.hvr-bob 

JSBIN

【讨论】：

-1 有什么原因吗？看起来它可以满足 OP 的要求......

我支持你，你的回答似乎是正确的。这个问题实际上很常见，我认为用户没有做足够的研究。如果可以的话，我会否决这个问题

太棒了，这就像一个魅力。就这么简单！我原以为必须使用某种伪元素才能使其工作。非常感谢:)

没问题，@MarkHughes88。很高兴我能帮上忙。

@MarkHughes88 您可以考虑将其作为正确答案，因为它对您有用