在按钮点击时启动css动画 [英] Start a css animation on button click
本文介绍了在按钮点击时启动css动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您好我一直在寻找关于我的问题的答案现在可能几个星期了,我什么也找不到。我试图做一个反应测试,以检查用户需要多长时间,他们的反应,它会弹出一个正方形或一个圆圈,我遇到了一个问题...
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 user before they react and it will popup either a square or a circle and I hit a problem...
我的问题是,如果有任何方法来启动一个动画,当用户点击屏幕上的按钮?
My question is if there's any way to start an animation when the user clicks the button on the screen ?
这里是我的代码到目前为止:
Here's my code so far:
HTML:
<div id="first-child"></div>
<button id="Second-parent">Click me !</button>
CSS:
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。
I prefer CSS, HTML, jQuery or Javascript. But if there's another way to do it I'll gladly hear that too.
推荐答案
$(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>
这篇关于在按钮点击时启动css动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文