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
  • 230 Views
  • 43 Minutes Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

Builds on 's original cloud and 's note about adding keyframes. The biggest practical wins are: animate transforms (not left/top) for smooth, GPU-accelerated motion; use a linear timing function for constant speed; make the element start off-screen and translate across more than 100vw; and provide a staggered duplicate or negative animation-delay to avoid a single-object “snap back.” Also include a prefers-reduced-motion fallback and avoid expensive properties (many box-shadows or animating box-shadow).

Example pattern (different from earlier snippets): a simple cloud using pseudo-elements, hardware-accelerated motion, and two instances staggered for continuous flow.

<div class="storm-cloud" aria-hidden="true"></div>
<div class="storm-cloud storm-cloud--alt" aria-hidden="true"></div>
.storm-cloud {
  position: fixed;
  top: 12vh;
  left: -160px;              /* off-screen start */
  width: 120px;
  height: 56px;
  background:#222;
  border-radius:40px;
  will-change: transform;
  animation: cloud-sail 14s linear infinite;
}
.storm-cloud::before,
.storm-cloud::after {
  content:''; position:absolute; background:#222; border-radius:50%;
}
.storm-cloud::before { width:64px; height:64px; left:8px; top:-22px; }
.storm-cloud::after  { width:48px; height:48px; left:56px; top:-12px; }

.storm-cloud--alt { top:20vh; opacity:.95; animation-delay:-7s; }

@keyframes cloud-sail {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(120vw,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .storm-cloud { animation: none; transform: none; }
}

Troubleshooting notes: if frames drop, profile with the browser Performance tab — animating transform should stay on the compositor layer. If many clouds are needed, consider SVG/sprites or animating a repeating background-position instead of dozens of box-shadows.

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.