Start a css animation on button click

前端未结

关注

 5  824

Hi I\'ve been looking for answers on my problem now for maybe a few weeks now and I find nothing. I\'m trying to make a reaction test to check how long time it takes for the

相关标签:

5条回答

爱一瞬间的悲伤

2021-01-05 21:41

Use a css class for the animation and add the class to div when button clicked. (use @keyframes to define css animations.)

0 讨论(0)
发布评论:

提交评论
- 加载中...

臣服心动

2021-01-05 21:41

A full example without using Jquery:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta charset="utf-8" />
  <title>CSS Animations</title>

  <style>
    /* <![CDATA[ */
    div {
      height: 2em;
      width: 50%;
      border: 1px solid black;
      background-color: black;
      color: yellow;
    }

    .animate {
      animation-name: slide-right;
      animation-duration: 2s;
      /* Preserve the effect of the animation at ending */
      animation-fill-mode: forwards;
    }

    @keyframes slide-right {

      from {
        margin-left: 0px;
      }

      50% {
        margin-left: 110px;
        opacity: 0.5;
      }

      to {
        margin-left: 200px;
        opacity: 0.2;
      }
    }

    /* ]]> */
  </style>

  <script>
    /* <![CDATA[ */

    function DoAnimation() {
      var targetElement = document.getElementById("target");
      targetElement.className = "animate";
    }
    /* ]]> */
  </script>
</head>
<body>
  <h1>CSS Animations</h1>
  <div id="target">Super div</div>
  <button onclick="DoAnimation();">Go</button>
</body>
</html>

0 讨论(0)

逝去的感伤

2021-01-05 21:57

Remove the -webkit-animation and animation definitions from #firstChild and instead create an "anim" class definition:

#first-child {
    height: 200px;
    width: 200px;
    background: white;
    border-radius: 0%;
    margin-top: 150px;
    margin-bottom: 0px;
    margin-left: 500px;
    margin-right: 0px;
}
.anim{
    -webkit-animation: myfirst 1s;
    animation: myfirst 1s;
}

Then when you want to trigger the animation simply add the .anim class to your element with jQUery:

$("#first-child").addClass("anim");

0 讨论(0)

醉梦人生

2021-01-05 21:58

Here the sample for you

#first-child {
  height: 200px;
  width: 200px;
  background: white;
  border-radius: 0%;
  margin-top: 150px;
  margin-bottom: 0px;
  margin-left: 500px;
  margin-right: 0px;
  -webkit-animation: myfirst 1s;
  animation: myfirst 1s;
  }
@-webkit-animation myfirst {
    0% {background: white;}
   20% {background: white;}
   40% {background: white;}
   60% {background: white;}
   80% {background: white;}
  100% {background: red;}
  }

.second-parent {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 415px;
  margin-right: 0px;
  }

<script>
$(document).ready(function()
{
    $('#Second-parent').click(function()
    {
        $('#first-child').addClass('second-parent');
     });
});
</script>

</head>

<body>
  <div id="first-child"></div>
  <button id="Second-parent">Click me !</button>
</body>

</html>

==> please add the jquery library in the , you can download lirabry in: http://jquery.com/download/

0 讨论(0)

萌比男神i

2021-01-05 22:00

$(function(){
	$('#second-parent').click(function(){
		e1 = $('#first-child');
        e1.addClass('animate');
        e1.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function (e) {
            e1.removeClass('animate');
        });
	});
});

 #first-child {
  height: 200px;
  width: 200px;
  background: white;
  border-radius: 0%;
  margin-top: 150px;
  margin-bottom: 0px;
  margin-left: 500px;
  margin-right: 0px;
  }
  .animate {
  -webkit-animation: myfirst 3s;
  animation: myfirst 3s;
  }
@keyframes myfirst {
    0% {background: white;}
   40% {background: gray;}
   70% {background: yellow;}
  100% {background: red;}
  }
@-webkit-keyframes myfirst {
    0% {background: white;}
   40% {background: gray;}
   70% {background: yellow;}
  100% {background: red;}
  }

#second-parent {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 415px;
  margin-right: 0px;
  }

<div id="first-child"></div><button id="second-parent">Click me !</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(function(){
		$('#second-parent').on('click',function(){
			$('#first-child').addClass('animate');
		});
	});

 #first-child {
  height: 200px;
  width: 200px;
  background: white;
  border-radius: 0%;
  margin-top: 150px;
  margin-bottom: 0px;
  margin-left: 500px;
  margin-right: 0px;
  }
  .animate {
  -webkit-animation: myfirst 3s;
  animation: myfirst 3s;
  }
@keyframes myfirst {
    0% {background: white;}
   40% {background: gray;}
   70% {background: yellow;}
  100% {background: red;}
  }

#second-parent {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 415px;
  margin-right: 0px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first-child"></div>
  <button id="second-parent">Click me !</button>

0 讨论(0)