CSS Animations now on Firefox

Add the -moz prefix and create CSS3 animations without any JavaScript.

With CSS3 we already saw the webkit animations.

Now we can also do that on Firefox πŸ˜‰

Full Code

<html> <head> <title>Example 18 | CodeGround</title> <style type="text/css"> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } </style> </head> <body> <h1>I'm comming from right</h1> <div style="padding-top:50px;"><a href="https://ricard.dev/css-animations-now-on-firefox/">Go back and leave a comment</a></div> </body> </html>

Demo

View demo

More

More information and examples at:

https://developer.mozilla.org/en/CSS/CSS_animations

One comment

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*