Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
    <head>
        <title>Wee Animation Test</title>
        <style>
        .awesome_but_not_important {
            height: 150px;
            width:  150px;
            background-color: red;
            padding: 5px;
            -webkit-animation: awesome 5s linear infinite;
            animation:         awesome 5s linear infinite;
        }
​
        .awesome_and_important {
            height: 150px !important;
            width:  150px !important;
            background-color: green;
            padding: 5px;
            -webkit-animation: awesome 5s linear infinite;
            animation:         awesome 5s linear infinite;
        }
​
        @-webkit-keyframes awesome { 
           50% { height: 250px; width: 250px; }
        }
​
        @keyframes awesome { 
           50% { height: 250px !important; width: 250px !important; }
        }
        </style>
    </head>
    <body>
        <div class="awesome_but_not_important">I am awesome, but not important so I animate in every browser that supports it.</div>
        <div class="awesome_and_important">I am awesome and important so I animate in every browser that supports it except Firefox that takes my important into account.</div>
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers