只使用纯CSS触发元素上的动画，并指定其关键帧。

Question

我想使用纯CSS在元素的点击时触发一些动画。我已经为这个元素分配了关键帧 容器类. 有一个 标签 所以当我点击这个。容器的 动画开始。不使用jquery也可以吗？简单地说，当按钮被点击时，动画将以指定的关键帧启动。

HTML

<div class="container container-anim">
   <div class="psw align-self-center">
       <a style="color:maroon" href="#reset">Back to log-in page</a> 
   </div>
</div>

CSS

.container-anim {    
animation-name: stretch;    
animation-duration: 1.5s; 
animation-iteration-count: infinite;

}

@keyframes stretch {
0% {transform: scale(1);}
50%{ }
100%{transform: scale(1.2);}

}

Answer 1

据我所知，如果不使用某种JS来将类附加到div元素上，是没有办法触发动画的。

我只是使用一个onclick和jquery（或vanilla js）。

<div class="container" onclick="$('.container').addClass('container-anim');">
   <div class="psw align-self-center">
       <a style="color:maroon" href="#reset">Back to log-in page</a> 
   </div>
</div>

Answer 2

您可以尝试的方法是使用 :active 伪类当你点击任何一个元素时，就会播放你的动画。

.container-anim:active {    
animation-name: stretch;    
animation-duration: 1.5s; 
animation-iteration-count: infinite;

}

@keyframes stretch {
0% {transform: scale(1);}
50%{ }
100%{transform: scale(1.2);}
}

<div class="container container-anim">
   <div class="psw align-self-center">
       <a class="a" style="color:maroon" href="#reset">Back to log-in page</a> 
   </div>
   </div>