How to trigger css animations on clicking

Question

i want my div when it is clicked it should rotate.Here is the my code:-The @keyframes line is not copied;-
#Booster{
height:70px;
width:70px;
background-color:lightgreen;
border-radius:50%;
position:absolute ;
top:430px;
left:150px;
border-top:2px solid red;
border-bottom:2px solid red;
border-right:2px solid transparent ;
border-left:2px solid transparent ;
animation-name: boost;
animation-duration: 1.0s;
animation-iteration-count: 1;
}

Answer 1

Thanks both and RY what a coincidence i was just seeing your comment Krishna sir's code

Answer 2

@Utkarsh i have to write just the animation name in #Booster:hover and not the animation delay,duration,and others??

Answer 3

@Mark your method helped and also@Utkarsh your one too .........Thanks both😊😊

Answer 4

Using Javascript. Create a class with the style declarations of how you want it rotated. When a user clicks the div, add that class to it. You wouldn't even need an animation property, just add:

transition: all 1s linear;

to your css block for the div #booster.

#booster .rotate {
transform: rotate(90deg); // what ever degree
}

$("#booster").on("click", function(){
this.addClass("rotate");
});

Answer 5

you can use CSS hover method put it like
#Booster{
//everything as you wrote
//dont put the animation name here

}
#Booster:hover{
animation-name:boost;
}

but it has one problem you have to click somewhere else first the click again to run it again

it should work but i am not sure

Answer 6

@nikhil Yes , just the animation name . On clicking the object the animation will take place .

Answer 7

Apply/remove it with JavaScript....👍