coldy
New Coder
Hello! I have a bit of a coding question for you that I was hoping you could help me with.
I'm trying to recreate some animated buttons that pulse on hover. You can see them here: https://www.awesomescreenshot.com/video/11208123?key=41467863d04e80302c97bcf799fd969e
I've got everything down except that when with my custom button, the animation stops when the mouse pointer leaves the button: https://www.awesomescreenshot.com/video/11208155?key=dc3de291321f0b4e2e9e11b4b1d037dc
I've been researching, but can't recreate that behavior. Could anyone help me with what I'm missing? Below is the problem code:
I'm trying to recreate some animated buttons that pulse on hover. You can see them here: https://www.awesomescreenshot.com/video/11208123?key=41467863d04e80302c97bcf799fd969e
I've got everything down except that when with my custom button, the animation stops when the mouse pointer leaves the button: https://www.awesomescreenshot.com/video/11208155?key=dc3de291321f0b4e2e9e11b4b1d037dc
I've been researching, but can't recreate that behavior. Could anyone help me with what I'm missing? Below is the problem code:
CSS:
@-webkit-keyframes klaviyo_form_trigger {
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@keyframes klaviyo_form_trigger {
to {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
.klaviyo_form_trigger:hover {
background-color:#437337;
-webkit-animation-name: klaviyo_form_trigger;
animation-name: klaviyo_form_trigger;
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: 2;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}