StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You're missing the duration and you have a trailing space in the name you assign:</p> <pre><code>function colorchange( test ) { test.style.webkitAnimationName = 'colorchange'; // you had a trailing space here which does NOT get trimmed test.style.webkitAnimationDuration = '4s'; } </code></pre> <p>Some more infos on <code>@-webkit-keyframes</code>:<br> <a href="http://webkit.org/blog/324/css-animation-2/">http://webkit.org/blog/324/css-animation-2/</a></p> <p><strong>update</strong></p> <p>Some working code.</p> <pre><code><html> <head> <style> @-webkit-keyframes colorchange { 0% { background-color: red; opacity: 1.0; -webkit-transform: scale(1.0) rotate(0deg); } 33% { background-color: blue; opacity: 0.75; -webkit-transform: scale(1.1) rotate(-5deg); } 67% { background-color: green; opacity: 0.5; -webkit-transform: scale(1.1) rotate(5deg); } 100% { background-color: red; opacity: 1.0; -webkit-transform: scale(1.0) rotate(0deg); } } </style> <script> function colorchange(e) { if (e.style.webkitAnimationName !== 'colorchange') { e.style.webkitAnimationName = 'colorchange'; e.style.webkitAnimationDuration = '4s'; // make sure to reset the name after 4 seconds, otherwise another call to colorchange wont have any effect setTimeout(function() { e.style.webkitAnimationName = ''; }, 4000); } } </script> </head> <body> <div onclick="colorchange(this)">Hello World!</div> </body> </html> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload