javascript - Is there a feasible way to trigger CSS keyframe animation using JS?

Naturally, we can create a CSS animation using keyframes, and control it from there.

However, ideally, I would like to trigger this animation from a button click - so the button click would be an event...

@keyframes fade-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

Now, on click, I want to trigger this animation; as opposed to from within the CSS animation property.

Naturally, we can create a CSS animation using keyframes, and control it from there.

However, ideally, I would like to trigger this animation from a button click - so the button click would be an event...

@keyframes fade-in {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

Now, on click, I want to trigger this animation; as opposed to from within the CSS animation property.

Share Improve this question edited Jul 18, 2016 at 15:40 asked Jul 18, 2016 at 15:29 CodeFinity 1,3502 gold badges22 silver badges27 bronze badges

1 Sounds good. Do you have some code for us to work with? – Hunter Turner Commented Jul 18, 2016 at 15:30
^ Please add some code. You can add a class which has the animation rule in it using any javascript/jquery event. – Mohit Bhardwaj Commented Jul 18, 2016 at 15:31
2 Simple answer is toggle classes that contain the css needed – charlietfl Commented Jul 18, 2016 at 15:37
Yes, but what about the transition time for the animation? – CodeFinity Commented Jul 18, 2016 at 15:42
Put the transition time in the class that you're toggling. – Daniel Beck Commented Jul 18, 2016 at 16:04

Add a comment |

4 Answers 4

Sorted by: Reset to default 7

see here jsfiddle

if you want your animation to work every time you press the button use this code :

$('button').click(function() {
    $(".fademe").addClass('animated');
    setTimeout(function() {
      $(".fademe").removeClass('animated');
    }, 1500);
});

where 1500 is the animation-duration in this case, 1.5s

$('button').click(function() {
  $(".fademe").addClass('animated');
  setTimeout(function() {
    $(".fademe").removeClass('animated');
  }, 1500);
});

.fademe {
  width: 100px;
  height: 100px;
  background: red;
}

.fademe.animated {
  animation: fade-in 1.5s ease;
}


@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fademe">

</div>

<button>CLICK ME</button>

EXPLANATION :

on click on the button add class animated ( or any other class ) to the element you want to apply the animation to , .fademe
make a setTimeout(function() to delay the removeClass for the duration of the animation 1.5s or 1500ms
write in CSS the declaration of the animation , @keyframes, and add it to the element with the class added by the JQ .fademe.animated

There is a toggle method that works just fine for this, hope it helps:

function Fade() {
  document.getElementById("box").classList.toggle("animate");
}

#box {
  background-color: black;
  height: 50px;
  width: 50px;
}

.animate {
  animation: fademe 0.5s;
}

@keyframes fademe {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<html>

<head>
  <title>
    Animation Trigger
  </title>
</head>

<body>
  <div id="box"></div>
  <button onclick="Fade()"> Fade above Box</button>
</body>

$("#move-button").on("click", function(){
  $("#ship").removeClass("moving");
  $("#ship")[0].offsetWidth = $("#ship")[0].offsetWidth;
  $("#ship").addClass("moving");
});//

#ship
{
  background: green;
  color: #fff;
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 100px;
}

#move-button
{
  margin-top: 20px;
}

#ship.moving
{
  animation: moving 2s ease;
}

@keyframes moving
{
  0%{ transform: translate(0px);}
  50%{ transform: translate(20px);}
  100%{ transform: translate(0px);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ship">Ship</div>
<button id="move-button">Push</button>

If you want to make the animation happen and always end before allowing the event listener to trigger it again, I would suggest to control the behaviour like this:

// Add this to your event listener
if (!element.classList.contains("myClass")) {
    element.className = "myClass";
    setTimeout(function() {
        element.classList.remove("myClass");
    }, 1000); //At least the time the animation lasts
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Is there a feasible way to trigger CSS keyframe animation using JS? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)