• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS CSS Button Animation Question

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:

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

coldy

New Coder
Where is the html that goes with this?
And that video the button only pulses once.

I did find this https://codepen.io/StrengthandFreedom/pen/PoqZRgM
It repeats because of this : animation-iteration-count: infinite;
Give it a try in the hover section.

Thank you for the reply! The number of bounces, 1, is correct. It's how the button stops pulsing when the mouse pointer leaves (video 2) that I can't figure out. I want the pulse animation to continue, like in video 1.

The HTML is a simple button that opens a Klaviyo form via their own Javascript snippet:

HTML:
<button class="klaviyo_form_trigger">Click Here To Play</button>

There is also additional CSS that formats the button and it shouldn't be relevant. But for good measure, here's that, too:

CSS:
<style>
.klaviyo_form_trigger {
  background-color: #6EB65B;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 30px;
  height:40px;
  width:175px;
  font-family: "Open Sans", sans-serif;
}
 

coldy

New Coder

cbreemer

King Coder
Hmmm.... when you implement an animation in a hover selector it obviously stops when you hover out. If only there was a property like animation-always-complete : true ... but alas there isn't.

But you can do this using the button's onmouseover trigger and a timer:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@keyframes klaviyo_form_trigger
{
  to
  {
    transform: scale(1.1);
  }
}

.klaviyo_form_trigger_animated
{
    background-color          : #437337;
    animation-name            : klaviyo_form_trigger;
    animation-duration        : 0.5s;
    animation-timing-function : linear;
    animation-iteration-count : 10;
    animation-direction       : alternate;

        border                    : none;
        color                     : white;
        text-align                : center;
        text-decoration           : none;
        display                   : inline-block;
        font-size                 : 16px;
        margin                    : 4px 2px;
        cursor                    : pointer;
        padding                   : 10px 20px;
        border-radius             : 30px;
        height                    : 80px;
        width                     : 300px;
        font-family               : Consolas;
}


.klaviyo_form_trigger
{
    background-color          : #6EB65B;
    border                    : none;
    color                     : white;
    text-align                : center;
    text-decoration           : none;
    display                   : inline-block;
    font-size                 : 16px;
    margin                    : 4px 2px;
    cursor                    : pointer;
    padding                   : 10px 20px;
    border-radius             : 30px;
    height                    : 80px;
    width                     : 300px;
    font-family               : Consolas;
}
</style>
<script>
function start_animation()
{
   btn.setAttribute("class", "klaviyo_form_trigger_animated");
   setTimeout(stop_animation, 5000);
}

function stop_animation()
{
   btn.setAttribute("class", "klaviyo_form_trigger");
}

</script>
</head>
<body>
<button onmouseover="start_animation()" id="btn" class="klaviyo_form_trigger">Click Here To Play</button>
</body>
</html>

It's not pretty, but it works. The duration of the timer should be equal to the duration of the animation. I increased that to 5s just to see it better.
Also I had to duplicate all of the style attributes. I guess that could be done in a more clever way.
 
Top