blocks|key|805260|text|你确定你只在webkit上显示你的页面吗？这是在safari中传递的代码。单击按钮后，图像(id='img')将旋转。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|805261|​|805262|function+ani()+{
++document.getElementById('img').className+=+'classname';
}|code-block|syntax|javascript|805263|.classname+{
++-webkit-animation-name:+cssAnimation;
++-webkit-animation-duration:+3s;
++-webkit-animation-iteration-count:+1;
++-webkit-animation-timing-function:+ease;
++-webkit-animation-fill-mode:+forwards;
}

@-webkit-keyframes+cssAnimation+{
++from+{
++++-webkit-transform:+rotate(0deg)+scale(1)+skew(0deg)+translate(100px);
++}
++to+{
++++-webkit-transform:+rotate(0deg)+scale(2)+skew(0deg)+translate(100px);
++}
}|805264|<input+name=""+type="button"+onclick="ani()"+value="Click">
<img+id="img"+src="https://i.stack.imgur.com/vghKS.png"+width="328"+height="328"+/>|805265|805266|entityMap^0|19|A|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>Are you sure you only display your page on webkit? Here is the code, passed on safari.
The image <code>(id='img')</code> will rotate after button click.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function ani() {
  document.getElementById('img').className = 'classname';
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  }
  to {
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input name="" type="button" onclick="ani()" value="Click"&gt;
&lt;img id="img" src="https://i.stack.imgur.com/vghKS.png" width="328" height="328" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|805247|text|您只需使用:active+pseudo-class即可。这是在单击任何元素时设置的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|805248|.classname:active+{
++++/*+animation+css+*/
}|code-block|syntax|javascript|805249|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes^0|5|7|5|K|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>You just use the <a href="http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes" rel="noreferrer"><code>:active</code> pseudo-class</a>. This is set when you click on any element.</p>

<pre><code>.classname:active {
    /* animation css */
}
</code></pre>


blocks|key|805201|text|您可以通过绑定onclick侦听器，然后像这样添加animate类来实现这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|805202|$('#button').onClick(function(){
++++$('#target_element').addClass('animate_class_name');
});|code-block|syntax|javascript|805203|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can achieve this by binding an onclick listener and then adding the animate class like this:</p>

<pre><code>$('#button').onClick(function(){
    $('#target_element').addClass('animate_class_name');
});
</code></pre>


blocks|key|805414|text|在css-tricks上找到解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|805415|const+element+=+document.getElementById('img')

element.classList.remove('classname');+//+reset+animation
void+element.offsetWidth;+//+trigger+reflow
element.classList.add('classname');+//+start+animation|code-block|syntax|javascript|805416|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/restart-css-animation/^0|1|A|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Found solution on <a href="https://css-tricks.com/restart-css-animation/" rel="noreferrer">css-tricks</a></p>

<pre><code>const element = document.getElementById('img')

element.classList.remove('classname'); // reset animation
void element.offsetWidth; // trigger reflow
element.classList.add('classname'); // start animation
</code></pre>


blocks|key|805401|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|805402|var++abox+=+document.getElementsByClassName("box")[0];
function+allmove(){
++++++++abox.classList.remove("move-ltr");
++++++++abox.classList.remove("move-ttb");
+++++++abox.classList.toggle("move");
}
function+ltr(){
++++++++abox.classList.remove("move");
++++++++abox.classList.remove("move-ttb");
+++++++abox.classList.toggle("move-ltr");
}
function+ttb(){
+++++++abox.classList.remove("move-ltr");
+++++++abox.classList.remove("move");
+++++++abox.classList.toggle("move-ttb");
}|code-block|syntax|javascript|805403|.box+{
++width:+100px;
++height:+100px;
++background:+red;
++position:+relative;
}
.move{
++-webkit-animation:+moveall+5s;
++animation:+moveall+5s;
}
.move-ltr{
+++-webkit-animation:+moveltr+5s;
++animation:+moveltr+5s;
}
.move-ttb{
++++-webkit-animation:+movettb+5s;
++animation:+movettb+5s;
}
@keyframes+moveall+{
++0%25+++{left:+0px;+top:+0px;}
++25%25++{left:+200px;+top:+0px;}
++50%25++{left:+200px;+top:+200px;}
++75%25++{left:+0px;+top:+200px;}
++100%25+{left:+0px;+top:+0px;}
}
@keyframes+moveltr+{
++0%25+++{+left:+0px;+top:+0px;}
++50%25++{left:+200px;+top:+0px;}
++100%25+{left:+0px;+top:+0px;}
}
@keyframes+movettb+{
++0%25+++{left:+0px;+top:+0px;}
++50%25++{top:+200px;left:+0px;}
++100%25+{left:+0px;+top:+0px;}
}|805404|<div+class="box"></div>
<button+onclick="allmove()">click</button>
<button+onclick="ltr()">click</button>
<button+onclick="ttb()">click</button>|805405|805406|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var  abox = document.getElementsByClassName("box")[0];
function allmove(){
        abox.classList.remove("move-ltr");
        abox.classList.remove("move-ttb");
       abox.classList.toggle("move");
}
function ltr(){
        abox.classList.remove("move");
        abox.classList.remove("move-ttb");
       abox.classList.toggle("move-ltr");
}
function ttb(){
       abox.classList.remove("move-ltr");
       abox.classList.remove("move");
       abox.classList.toggle("move-ttb");
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
.move{
  -webkit-animation: moveall 5s;
  animation: moveall 5s;
}
.move-ltr{
   -webkit-animation: moveltr 5s;
  animation: moveltr 5s;
}
.move-ttb{
    -webkit-animation: movettb 5s;
  animation: movettb 5s;
}
@keyframes moveall {
  0%   {left: 0px; top: 0px;}
  25%  {left: 200px; top: 0px;}
  50%  {left: 200px; top: 200px;}
  75%  {left: 0px; top: 200px;}
  100% {left: 0px; top: 0px;}
}
@keyframes moveltr {
  0%   { left: 0px; top: 0px;}
  50%  {left: 200px; top: 0px;}
  100% {left: 0px; top: 0px;}
}
@keyframes movettb {
  0%   {left: 0px; top: 0px;}
  50%  {top: 200px;left: 0px;}
  100% {left: 0px; top: 0px;}
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;&lt;/div&gt;
&lt;button onclick="allmove()"&gt;click&lt;/button&gt;
&lt;button onclick="ltr()"&gt;click&lt;/button&gt;
&lt;button onclick="ttb()"&gt;click&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1020046|text|CSS唯一的解决方案，在每次点击时都能工作，并将动画播放到底：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1020047|您所要做的就是将动画添加到:focus伪类，并在:active伪类中将其设置为none。|offset|length|style|CODE|1020048|如果您的元素不可聚焦，请将tabindex="0"属性添加到html元素：|1020049|​|1020050|@keyframes+beat+{
++0%25+{
++++-webkit-transform:+scale(1,+1);
++++++++++++transform:+scale(1,+1);
++}
++100%25+{
++++-webkit-transform:+scale(0.8,0.8);
++++++++++++transform:+scale(0.8,+0.8);
++}
}
.className+{
++background-color:#07d;++
++color:+#fff;
++font-family:+sans-serif;
++font-size:+20px;
++padding:+20px;
++margin:5px;
++-webkit-transform:+scale(1,+1);
++++++++++transform:+scale(1,+1);
}
.className:focus+{
++-webkit-animation:+beat+1s+ease-in-out+backwards;
++++++++++animation:+beat+1s+ease-in-out+backwards;
}
.className:active+{
++-webkit-animation:+none;
++++++++++animation:+none;
}
body+{
++text-align:+center;
}+|code-block|syntax|javascript|1020051|<h3>Any+element+with+tabindex="0",+like+a+div:</h3>
<div+tabindex="0"+class="className">+Click+me+many+times!</div>
<h3>Any+focusable+element+like+a+button:</h3>
<button+class="className">+Click+me+many+times!</button>|1020052|1020053|entityMap^0|0|D|6|O|7|0|D|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]|$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|14|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|15|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|16|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|17|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|U|$]]

<h1>CSS ONLY solution that works on every click and plays the animation to the end:</h1>
<p>All you have to do is to add the animation to the  <code>:focus</code> pseudo class and set it to none  in <code>:active</code> pseudo class.</p>
<p>If your element isn't focusable add <code>tabindex=&quot;0&quot;</code> attribute to the html element:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes beat {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(0.8,0.8);
            transform: scale(0.8, 0.8);
  }
}
.className {
  background-color:#07d;  
  color: #fff;
  font-family: sans-serif;
  font-size: 20px;
  padding: 20px;
  margin:5px;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.className:focus {
  -webkit-animation: beat 1s ease-in-out backwards;
          animation: beat 1s ease-in-out backwards;
}
.className:active {
  -webkit-animation: none;
          animation: none;
}
body {
  text-align: center;
} </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;Any element with tabindex="0", like a div:&lt;/h3&gt;
&lt;div tabindex="0" class="className"&gt; Click me many times!&lt;/div&gt;
&lt;h3&gt;Any focusable element like a button:&lt;/h3&gt;
&lt;button class="className"&gt; Click me many times!&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1019894|text|添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1019895|-webkit-animation-play-state:+paused;|code-block|syntax|javascript|1019896|添加到CSS文件中，然后您可以使用以下JS行控制动画是否正在运行：|1019897|document.getElementById("myDIV").style.WebkitAnimationPlayState+=+"running";|1019898|如果希望动画每次单击时都运行一次。记住要设置|1019899|-webkit-animation-iteration-count:+1;|1019900|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Add a </p>

<pre><code>-webkit-animation-play-state: paused;
</code></pre>

<p>to your CSS file, then you can control whether the animation is running or not by using this JS line:</p>

<pre><code>document.getElementById("myDIV").style.WebkitAnimationPlayState = "running";
</code></pre>

<p>if you want the animation to run once, every time you click. Remember to set </p>

<pre><code>-webkit-animation-iteration-count: 1;
</code></pre>


blocks|key|1019945|text|您可以使用以下代码来完成此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1019946|$('#button_id').on('click',+function(){
$('#element_want_to_target').addClass('.animation_class');});|code-block|syntax|javascript|1019947|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can do that by using following code</p>

<pre><code>$('#button_id').on('click', function(){
$('#element_want_to_target').addClass('.animation_class');});
</code></pre>


blocks|key|1019864|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1019865|<div>
+<p+onclick="startAnimation()">Start</p>
+<div+id="animation">Hello!</div>+
</div>

<style>
@keyframes+animationName+{
from+{margin-left:-30%25;}
}
</style>

<script>
function+startAnimation()+{
++++document.getElementById("animation").style.animation+=+"animationName+2s+linear+1";
}
</script>|code-block|syntax|javascript|1019866|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this:</p>

<pre><code>&lt;div&gt;
 &lt;p onclick="startAnimation()"&gt;Start&lt;/p&gt;&lt;!--O botão para iniciar (start)--&gt;
 &lt;div id="animation"&gt;Hello!&lt;/div&gt; &lt;!--O elemento que você quer animar--&gt;
&lt;/div&gt;

&lt;style&gt;
@keyframes animationName {
from {margin-left:-30%;}
}
&lt;/style&gt;

&lt;script&gt;
function startAnimation() {
    document.getElementById("animation").style.animation = "animationName 2s linear 1";
}
&lt;/script&gt;
</code></pre>


<p>How can I get a CSS Animation to play with a JavaScript onClick? I currently have:</p>

<pre><code>.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration:3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  }
  to {
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  }
}
</code></pre>

<p>How can I apply an onClick?</p>


CSS Animation onClick

如何使用JavaScript onClick播放CSS动画？我目前有：.classname {  -webkit-animation-name: cssAnimation;  -webkit-animation-duration:3s;  -webkit-animation-iteration-count: 1;  -webkit-animation-timing-function: ease; 

问CSS动画onClick
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS动画onClickEN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS动画onClick
EN