CSS Animation onClick

Question

How can I get a CSS Animation to play with a JavaScript onClick  I currently have    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           How can I apply an onClick

User · Answer

You can achieve this by binding an onclick listener and then adding the animate class like this       button   onClick function            target element   addClass  animate class name

User · Answer

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

User · Answer

You can do that by using following code      button id   on  click   function        element want to target   addClass   animation class

User · Answer

x000D   x000D  var  abox   document getElementsByClassName  box   0   x000D  function allmove    x000D          abox classList remove  move-ltr    x000D          abox classList remove  move-ttb    x000D         abox classList toggle  move    x000D    x000D  function ltr    x000D          abox classList remove  move    x000D          abox classList remove  move-ttb    x000D         abox classList toggle  move-ltr    x000D    x000D  function ttb    x000D         abox classList remove  move-ltr    x000D         abox classList remove  move    x000D         abox classList toggle  move-ttb    x000D    x000D   box   x000D    width  100px  x000D    height  100px  x000D    background  red  x000D    position  relative  x000D    x000D   move  x000D    -webkit-animation  moveall 5s  x000D    animation  moveall 5s  x000D    x000D   move-ltr  x000D     -webkit-animation  moveltr 5s  x000D    animation  moveltr 5s  x000D    x000D   move-ttb  x000D      -webkit-animation  movettb 5s  x000D    animation  movettb 5s  x000D    x000D   keyframes moveall   x000D    0     left  0px  top  0px   x000D    25    left  200px  top  0px   x000D    50    left  200px  top  200px   x000D    75    left  0px  top  200px   x000D    100   left  0px  top  0px   x000D    x000D   keyframes moveltr   x000D    0      left  0px  top  0px   x000D    50    left  200px  top  0px   x000D    100   left  0px  top  0px   x000D    x000D   keyframes movettb   x000D    0     left  0px  top  0px   x000D    50    top  200px left  0px   x000D    100   left  0px  top  0px   x000D    x000D   lt div class  box  gt  lt  div gt  x000D   lt button onclick  allmove    gt click lt  button gt  x000D   lt button onclick  ltr    gt click lt  button gt  x000D   lt button onclick  ttb    gt click lt  button gt  x000D   x000D   x000D

User · Answer

You just use the  active pseudo-class  This is set when you click on any element    classname active          animation css

User · Answer

Add a   -webkit-animation-play-state  paused    to your CSS file  then you can control whether the animation is running or not by using this JS line   document getElementById  myDIV   style WebkitAnimationPlayState    running     if you want the animation to run once  every time you click  Remember to set   -webkit-animation-iteration-count  1

User · Answer

Are you sure you only display your page on webkit  Here is the code passed on safari  The image  id  img   will rotate after button click    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset UTF-8    gt   lt style type  text css  gt   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          lt  style gt   lt script type  text javascript  gt    function ani        document getElementById  img   className   classname        lt  script gt   lt title gt Untitled Document lt  title gt   lt  head gt    lt body gt   lt input name    type  button  onclick  ani      gt   lt img id  img  src  clogo png  width  328  height  328    gt   lt  body gt   lt  html gt

User · Answer

Found solution on css-tricks  const element   document getElementById  img    element classList remove  classname       reset animation void element offsetWidth     trigger reflow element classList add  classname       start animation

[javascript] CSS Animation onClick

Examples related to javascript

Examples related to css

Examples related to animation

Examples related to click

Examples related to onclick