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 information and examples at:

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

Full Code

Demo

More

Gian Faye

Leave a Reply Cancel reply