Trigger Animation on an element using only pure CSS with its keyframe Assigned

Question

I want some animation to be triggered to onclick of an element only using pure css. I have already assigned keyframe to this class container. There is a tag So when I click this, container's animation get started. Is it possible without using jquery ? In simple words when button is clicked animations get started with the assigned keyframe.

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);}

}

Captain SemiColon · Accepted Answer · 2020-05-07 21:48:05Z

1

There is no way that I know off to trigger animation without using some sort of JS to attach the class to the div element.

I would just use an onclick and jquery (or 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>

answered May 7, 2020 at 21:48

Captain SemiColon

1018 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

taimoor1990 Over a year ago

Thanks for your answer but there's a restriction as mentioned in the question already

dqve · Accepted Answer · 2020-05-07 22:12:24Z

0

An approach you can try is using the :active pseudo-class, this plays your animation when you click on any element. as so:

.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>

answered May 7, 2020 at 22:12

dqve

6096 silver badges19 bronze badges

Collectives™ on Stack Overflow

Trigger Animation on an element using only pure CSS with its keyframe Assigned

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related