How can i combine a css animation and a button?🤔🤔

Question

I want to make that when I click on the button the animation should start.PLEASE TELLL

Answer 1

This do the trick:

<input type="button" value="anim!">
<div></div>

<style>
div{
height:10px;
background-color:red;
}
input[type=button]:focus+div {
animation-name:hi;
animation-duration:5s
}
@keyframes hi{
from {width:0px;}
to {width:200px;}
0% {background-color:red;}
50% {background-color:blue;}
100% {background-color:green;}
}
</style>

... obviously, you need to better target if you have others elements in page ^^
And the default of this pure css way, is that the button must be before the element you want animate, and be parent or 'brother' of it ( not child, or 'nephew' )... ( limitation of css selectors ) And unfortnally, to repeat the animation, you need to make button keep focus before regiving to it ( you need to click somewhere else before re-clicking the button ), and you stop brutally the animation if you click outside the button before ending animate :P

Really, in the case of button use interactivity, you need often to handle that with JS... ( through click event, adding a class or the animation property, an remove it when animation end: there's also events for css animation ;) )

Answer 2

button:active{animation-name:ani;....}
@keyframes ani{.....}

Answer 3

hey visph your code is absolutely the one I wanted
But how can I make the line to stop where the animation stopped. like it starts from 0px and ends to 200px but after the animation stops not comeback to its initial position(I.e. 0px).

Answer 4

I did this in my code using Jquery

https://code.sololearn.com/W13b9ype9wAM/?ref=app

Answer 5

Can you do this in this code:-
HTML--
<div></div>
CSS--
div{
height:10px;
background-color:red;
animation-name:hi;
animation-duration:5s}
@keyframes hi{
from {width:0px;}
to {width:200px;}
0% {background-color:red;}
50% {background-color:blue;}
100% {background-color:green;}
}

IT GIVES A LINE MOvING BUT I WANT TO START IT WITH A BUTTON.

Answer 6

Offtopic:

How is it possible that questions gets widely more 'thumb up' than answers @@ ...
( this doesn't required answer, it's just a personnal thinking ^^ )

Answer 7

Yes sure... I know it's because of perversion by missuse of them ( I wrote that's doesn't required answer ;) )...

But you prefer mark as 'best answer' a likestormed one ( I respect @VH anyway ), rather than the one I provided and you have commented as "hey visph your code is absolutly the one I wanted" or the complementary one I wrote for your second one more accurate question :P ( I don't really care for that specifically for this thread and my own case, but for a globaly best good working of SoloLearn Q&A section ^^ )

Answer 8

You mean that questions are found having more likes as compared to answers ? I think b'coz of likestorm
I asked a question "Do you like the Likestorm"
The one who answered this got it....In likestorm everybody tries to give as much notifications as he/she can by giving likes to his /her posts and codes

Answer 9

Sorry man !! I just saw the top answer and marked it as best(that answer was right so i thought to mark as "best" ) but now i saw all your help to me thanks for that 😁😁

Answer 10

You can change the style applied to the div before and after animation...
Before, set 'div' rules as you want.
After, set the 'input:focus+div' rules.

But 'before' state, will remain the after-after, when button will lost focus ^^ ( you can handle all that stuff more properly with JS )

You can also try the expriemental property 'animation-fill-mode', but as an 'experiemental' one, it's not supposed to be implemented in all brothers, or by same ways if it is...