2

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
15
Views
3 Years
Discussion Span
Last Post by <M/>
2

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>
Votes + Comments
noice
0

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.

1

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...

Votes + Comments
Okie dokie
0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.