Start a css animation on button click

前端 未结 5 834
伪装坚强ぢ
伪装坚强ぢ 2021-01-05 21:25

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)
  • 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)
提交回复
热议问题