Member Avatar for <M/>

I learned how to make a storm, and this is how you do it:

HTML:
<div class="stormy"></div>

CSS:

 /* STORMY */
    .stormy {
        animation: stormy 5s ease-in-out infinite;
        background: #222222;
        border-radius: 50%;
        box-shadow: 
            #222222 65px -15px 0 -5px, 
            #222222 25px -25px, 
            #222222 30px 10px, 
            #222222 60px 15px 0 -10px, 
            #222222 85px 5px 0 -5px;
        height: 50px;  
        width: 50px; 
        margin-left: -60px; 
        position: absolute;
        left: 947px; 
        top: 70px; 
    }
  • 2 Contributors
  • 4 Replies
  • 213 Views
  • 43 Minutes Discussion Span
  • Latest Post Latest Post by <M/>

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

Nice, but you are missing the @keyframes to invoke the animation and also support (webkit vendor prefix for example) for browsers that do not natively support the animation property.

Here is an updated example.. hope you dont mind.
http://jsfiddle.net/LsyKR/

<!DOCTYPE html>
<html>
<head>
<style>
.stormy {
        animation: stormy 5s;
        -webkit-animation: stormy 5s; /* Chrome, Safari, Opera */
        background: #222222;
        border-radius: 50%;
        box-shadow: 
            #222222 65px -15px 0 -5px, 
            #222222 25px -25px, 
            #222222 30px 10px, 
            #222222 60px 15px 0 -10px, 
            #222222 85px 5px 0 -5px;
        height: 50px;  
        width: 50px;
        margin-left: 0px; 
        position:absolute;
        left: 850px; 
        top: 100px;  
    }
@-webkit-keyframes stormy {
    from {left: 850px}
    to {left: 100px}
}

@keyframes stormy {
    from {left: 850px}
    to {left: 100px}
}

 </style>

</head>
<body>

<div class="stormy"></div>

</body>
</html>
commented: noice +0
Member Avatar for <M/>

you are missing the @keyframes to invoke the animation and also support (webkit vendor prefix for example) for browsers that do not natively support the animation property.

Ah, thanks for bringing that up!

Here is an updated example.. hope you dont mind.

That is actually pretty nice, though it would be better to see the cloud moving left to right continuously.

Member Avatar for JorgeM

That is actually pretty nice, though it would be better to see the cloud moving left to right continuously.

Ok...sounds good. you or anyone interested can continue working off that jsFiddle and improve it some more...

commented: Okie dokie +0
Member Avatar for <M/>

When i get the chance, i will try to make some changes to it :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.