Question

嗨，我现在一直在寻找我的问题的答案，可能已经有几个星期了，我一无所获。我正在尝试进行反应测试以检查用户在他们做出反应之前需要多长时间，然后它会弹出正方形或圆形而我遇到问题......

我的问题是，当用户点击屏幕上的按钮时，是否有办法启动动画？

到目前为止，这是我的代码：

HTML：

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

CSS：

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

我更喜欢CSS，HTML，jQuery或Javascript。但如果有另一种方法可以做到这一点，我也很乐意听到。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

为动画使用css类，并在单击按钮时将类添加到div。（使用@keyframes定义css动画。）

Answer 3

从#firstChild中删除-webkit-animation和动画定义，改为创建“anim”类定义：

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

然后，当您想要触发动画时，只需使用jQUery将.anim类添加到元素中：

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

Answer 4

这里的样本

#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>

==＆GT;请添加jquery库，您可以在http://jquery.com/download/

下载lirabry

Answer 5

不使用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>

按钮单击启动css动画

5 个答案: