Menu
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?
207
On the Animations tab, in the Advanced Animation group, click Animation Pane. In the Animation Pane, select the animation that you want to trigger. In the Advanced Animation group, click Trigger, point to On Click of, and select the object that you want to trigger the animation.
Use CSS animations for simpler transitions, like one-shot transitions. For example, we can say like toggling UI element states. Use JavaScript animations when you want to have advanced effects like bounce, stop, pause, rewind, slow-down or if you need a control of when and what to animate.
The CSS animation-delay property has the following syntax: animation-delay: [time] | initial | inherit; As you can see, there are three possible values: time, initial, and inherit. The first option is [time], which is the number of seconds or milliseconds before the animation starts.
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.
function ani() { document.getElementById('img').className = 'classname'; }.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); } }<input name="" type="button" onclick="ani()" value="Click"> <img id="img" src="https://i.stack.imgur.com/vghKS.png" width="328" height="328" />You just use the :active pseudo-class. This is set when you click on any element.
.classname:active { /* animation css */ } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
