0
Is there any parameter for my animation to activate x in x time?
For example, every 7 seconds I want this animation to activate:
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn-buy {
box-shadow: none;
border: none;
padding: 15px;
border-radius: 5px;
text-transform: uppercase;
width: 30%;
background-color: #68dc32;
color: #FFF;
font-weight: 600;
cursor: pointer;
animation-duration: 0.5s;
animation-name: buyScale;
animation-iteration-count: 2;
}
@keyframes buyScale {
0%{transform: scale(1);}
50%{transform: scale(1.1);}
100%{transform: scale(1)}
}
</style>
</head>
<body>
<button class="btn-buy">Comprar</button>
</body>
</html>Is there any parameter in Animation without having to do it by JS?
In your case leave the animation as
infinitand with the time of 8s, and from 0% to 12.5% ( 100/8 = 12.5) the animation has to happen completely, (the whole animation happens in the first of 8 seconds) and from 12.5% to 100% it gets the initial values of before the animation, ie Scale(1), for 7 seconds before restarting.– hugocsl
@hugocsl But that "time of 8s" you say, is the Animation Duration? Because if it is, it is very slow when it is "animating"...
– Lucas de Carvalho
The
animation-iteration-count: infinite;is infinite. Theanimation-duration: 8s;I suggested 8s, but the actual animation is going to happen in 1s, the other 7s gets stuck, in the same state as the initial one. If you want you can adjust these values to your liking, it’s simple math... Whether it happens at 0.5s makes your animation happen from 0% to 6.25% from 6.25% to 100% stays still, it will stand still for 7.5 seconds before starting the animation again. Read Duplicate that has more details and examples– hugocsl
@hugocsl I understood, I was able to reproduce in parts, the problem is this one, let’s say the animation with 8s, from 0 to 12,5 it goes normal with Scale(1.1) beauty, it is slow only in the process of 12,5 to 100, that it will return to the "normal state", for Cale(1). I’ll give you a better figure here to see if I can reproduce, I got the rule of three thing.
– Lucas de Carvalho
As I said, from 0 to 12.5, "All" animation has to happen, that is, from 0 to 6.25 goes to 1.1, and from 6.25 to 12.5 goes back to 1. And this is how Scale(1) from 12.5 to 100%
– hugocsl
@hugocsl got it, it was good. If you want to put as answer I mark as accepted!
– Lucas de Carvalho
The question remains as duplicate understands..., if you want to give me a strength of one Up in the other Answer I marked as duplicate ;)
– hugocsl