Css3 techniques for creating seamless cloud animations

I am struggling with a CSS3 animation effect. For example, the clouds in this animation continue to animate for 7 seconds, then return to the starting point and begin animating again. However, when they come back to the starting point, it appears as if the cloud is reversing before restarting the animation. I want to eliminate this reverse motion and have the animation flow continuously in one direction. Can anyone provide assistance?

View the demo on Fiddle

CSS3

.sky {
        height:638px;
        background:#007fd5;
        position:relative;
        overflow:hidden;
        -webkit-animation:sky_background 50s ease-out infinite;
        -moz-animation:sky_background 50s ease-out infinite;
        -o-animation:sky_background 50s ease-out infinite;
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0)
    }

    .moon {
        background:url("http://montanaflynn.me/lab/css-clouds/images/moon.png");
        position:absolute;
        left:0;
        height:85%;
        width:300%;
        -webkit-animation:moon 50s linear infinite;
        -moz-animation:moon 50s linear infinite;
        -o-animation:moon 50s linear infinite;
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0)
    }

    .clouds_one {
          margin-top: -55px;
        background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_one.png");
        position:absolute;
        left:0;
        top:0;
        height:80%;
        width:400%;
        -webkit-animation:cloud_one 3s linear infinite;
        -moz-animation:cloud_one 3s linear infinite;
        -o-animation:cloud_one 3s linear infinite;
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0)
    }

    .clouds_two {
        background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_two.png");
        position:absolute;
        left:0;
        top:0;
        height:80%;
        width:400%;
        -webkit-animation:cloud_two 4s linear infinite;
        -moz-animation:cloud_two 4s linear infinite;
        -o-animation:cloud_two 4s linear infinite;
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0)
    }

    .clouds_three {
        background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
        position:absolute;
        left:0;
        top:0;
        height:75%;
        width:400%;
        -webkit-animation:cloud_three 7s linear infinite;
        -moz-animation:cloud_three 7s linear infinite;
        -o-animation:cloud_three 7s linear infinite;
        -webkit-transform:translate3d(0,0,0);
        -moz-transform:translate3d(0,0,0);
        -o-transform:translate3d(0,0,0)
    }

HTML

<div class="sky">
      <div class="clouds_one"></div>
      <div class="clouds_two"></div>
      <div class="clouds_three"></div>
    </div>
jqueryhtmlcssanimation

Answer №1

 @-webkit-keyframes sky_one {
    0% {
        right:100%
    }

    100% {
        right:-100%
    }
}

@-webkit-keyframes sky_two {
    0% {
        right:100&
    }

    100% {
        right:-100%
    }
}

@-webkit-keyframes sky_three {
    0% {
        right:+100%
    }

    100% {
        right:-100%
    }
}

Answer №2

Don't miss out on trying this code..
CSS 

*{ margin: 0; padding: 0;}

body {
    /*Hiding the pesky horizontal scroller that pops up during animation*/
    overflow: hidden;
}

#clouds{
    padding: 100px 0;
    background: #c9dbe9;
    background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
    background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
    background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}

/*Perfecting the cloud shape*/
.cloud {
    width: 200px; height: 60px;
    background: #fff;

    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;

    position: relative; 
}

.cloud:before, .cloud:after {
    content: '';
    position: absolute; 
    background: #fff;
    width: 100px; height: 80px;
    position: absolute; top: -15px; left: 10px;

    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;

    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

.cloud:after {
    width: 120px; height: 120px;
    top: -55px; left: auto; right: 15px;
}

/*Let's add some animation*/
.x1 {
    -webkit-animation: moveclouds 15s linear infinite;
    -moz-animation: moveclouds 15s linear infinite;
    -o-animation: moveclouds 15s linear infinite;
}

/*Adjusting speed, opacity, and position for realistic clouds effect*/
.x2 {
    left: 200px;

    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.6;

    -webkit-animation: moveclouds 25s linear infinite;
    -moz-animation: moveclouds 25s linear infinite;
    -o-animation: moveclouds 25s linear infinite;
}

.x3 {
    left: -250px; top: -200px;

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.8;

    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
    -o-animation: moveclouds 20s linear infinite;
}

.x4 {
    left: 470px; top: -250px;

    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.75;

    -webkit-animation: moveclouds 18s linear infinite;
    -moz-animation: moveclouds 18s linear infinite;
    -o-animation: moveclouds 18s linear infinite;
}

.x5 {
    left: -150px; top: -150px;

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.8;

    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
    -o-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}

Check it out here: http://jsfiddle.net/vampireneo/Bt5VN/

Answer №3

html,body {
margin:0;
height:100%
}

.sky {
height:480px;
background:#007fd5;
position:relative;
overflow:hidden;
-webkit-animation:sky_background 50s ease-out infinite;
-moz-animation:sky_background 50s ease-out infinite;
-o-animation:sky_background 50s ease-out infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}


.moon {
background:url("http://montanaflynn.me/lab/css-clouds/images/moon.png");
position:absolute;
left:0;
height:100%;
width:300%;
-webkit-animation:moon 50s linear infinite;
-moz-animation:moon 50s linear infinite;
-o-animation:moon 50s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}


.clouds_one {
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_one.png");
position:absolute;
left:0;
top:0;
height:100%;
width:300%;
-webkit-animation:cloud_one 50s linear infinite;
-moz-animation:cloud_one 50s linear infinite;
-o-animation:cloud_one 50s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}

.clouds_two {
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_two.png");
position:absolute;
left:0;
top:0;
height:100%;
width:300%;
-webkit-animation:cloud_two 75s linear infinite;
-moz-animation:cloud_two 75s linear infinite;
-o-animation:cloud_two 75s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}

.clouds_three {
background:url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
position:absolute;
left:0;
top:0;
height:100%;
width:300%;
-webkit-animation:cloud_three 100s linear infinite;
-moz-animation:cloud_three 100s linear infinite;
-o-animation:cloud_three 100s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
}

@-webkit-keyframes sky_background {
0% {
background:#007fd5;
color:#007fd5
}

50% {
background:#000;
color:#a3d9ff
}

100% {
background:#007fd5;
color:#007fd5
}
}

@-webkit-keyframes moon {
0% {
opacity: 0;
left:-200%
-moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
}

50% {
opacity: 1;
-moz-transform: scale(1);
left:0%
bottom:250px;
  -webkit-transform: scale(1);
}

100% {
opacity: 0;
bottom:500px;
-moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
}
}

@-webkit-keyframes cloud_one {
0% {
left:0
}

100% {
left:-200%
}
}

@-webkit-keyframes cloud_two {
0% {
left:0
}

100% {
left:-200%
}
}

@-webkit-keyframes cloud_three {
0% {
left:0
}

100% {
left:-200%
}
}

@-moz-keyframes sky_background {
0% {
background:#007fd5;
color:#007fd5
}

50% {
background:#000;
color:#a3d9ff
}

100% {
background:#007fd5; 
color:#007fd5
}
}

@-moz-keyframes moon {
0% {
opacity: 0;
left:-200%
-moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
}

50% {
opacity: 1;
-moz-transform: scale(1);
left:0%
bottom:250px;
  -webkit-transform: scale(1);
}

100% {
opacity: 0;
bottom:500px;
-moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);
}
}

@-moz-keyframes cloud_one {
0% {
left:0
}

100% {
left:-200%
}
}

@-moz-keyframes cloud_two {
0% {
left:0
}

100% {
left:-200%
}
}

@-moz-keyframes cloud_three {
0% {
left:0
}

100% {
left:-200%
}
}
<!DOCTYPE html>

<html>
<head>
    <meta charset='UTF-8'>
    <title>Improved Cloud</title>
</head>

<body>
    <div class="sky">
    
    <div class="moon"></div>
    
        <div class="clouds_one"></div>

        <div class="clouds_two"></div>

        <div class="clouds_three"></div>
    </div>
</body>
</html>

Code snippet is functioning as expected. Feel free to test it out.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with animating the background color of an input button using jQuery?

I'm completely confused as to why the background color isn't changing despite investing a significant amount of time into it: <input type="button" class="front-consultation-btn" value="Get A Free Consultation"> <script> $(' ...

jqueryhtmlanimationcssjquery-animate

Tips for utilizing Jquery to manage a dropdown designed in button form

<div class="btn-group btn-grp-uk col-xs-12 "> <button id="colorList" type="button" class="btn-phn btn btn-dropdown-white- uk dropdown-toggle col-xs-12" data-toggle="dropdown">Red </button> <ul id="colordrop" class="dr ...

javascriptjquery

Comparing jQuery's min-width and width properties: A guide on eliminating pixels

Exploring some basic jQuery and JavaScript here. When I use the .width() method, I get an integer value. However, when I use .css('min-width'), it returns a value in pixels which makes it challenging to perform calculations. What would be the be ...

javascriptjquerywidthcss

Trouble arises when trying to link IE7 with jQuery

I am currently testing a website with jQuery. There is a plugin that, when hovered over, slides down to reveal another banner, subsequently sliding the banner below it down as well. I have added a link on the bottom banner using z-index, and although it wo ...

jqueryhtmlajaxcss

When the last character in the route is a forward slash, the Express server will load the HTML page with CSS and JavaScript. Conversely, if the last route character

On my second html page model.html, I noticed the following issue: When I include a '/' at the end of my route address in the browser like this: http://localhost:3002/home/model/, the correct html page is loaded, but the css/js files do not load. ...

htmlcssnode.jsexpress

Styling for jQuery mobile panels disappears when used on multiple pages

Currently, I am working on developing a mobile application for PhoneGap using jQuery Mobile. The app consists of multiple pages within the same HTML document. I have configured it so that all pages share the same panel, but I am facing an issue with the st ...

jqueryhtmljquery-mobilecordova

What is the reason that certain functionalities do not work on an element that has two CSS classes assigned to it

I have a unique situation with two input elements and a button: <input class="close-acc-usr opt-in" type="text" name="closeAccUsr" /> <input class="close-acc-pin opt-in" type="number" name="cl ...

javascripthtmlcss

The FullCalendar with Datetime forma in +zone falls in the current time frame

I am trying to implement fullcalendar to check if there is an event in the current time and date, but it doesn't seem to be working. Can someone please help me figure out what I'm doing wrong? startdate VARCHAR enddate VARCHAR example format = ...

phpjquerymysqldatabasefullcalendar

Adjust the height of a div according to the width using CSS in a progressive manner

I'm looking to create a fluid container that adjusts its height gradually based on the width of the window (as the div's width is set to 100%). Similar to the behavior achieved with the aspect-ratio CSS rule, I want the height to smoothly increas ...

htmlcss

Interactive tool for crafting dynamic web experiences

I am in the process of developing a straightforward hosting website for my projects. However, I have noticed that many software options feature a split view for editing code and previewing changes, such as Dreamweaver. I am on the lookout for a live edito ...

htmllive

What is the best way to display an alert box through AJAX technology?

My code snippet is as follows: <script> function updateQty(quantity) { $.ajax({ alert(quantity); }) } </script> Here is the corresponding HTML markup: <form name="quantityForm"> <select name="quantity" id="quantity" onChan ...

javascriptjqueryhtmlajax

Ways to ensure that both the Search text field and search button are of equal height

I am facing an issue with the layout of my HTML code within my ASP.NET MVC web application. Below is the snippet of code causing the problem: <form class="customSearch" method="GET" action="@Url.Action("Search", "Home")"> <input class="searchIn ...

csshtml

Guide to utilizing JSON strings in JavaScript

I am facing an issue with a function var url = "MyAvailability.aspx?mode=get"; $.get(url, function(data) { alert(data); }); This function returns a Json string representation of events: events: [{'id': 1,& ...

jqueryajax

The wp_mail function is exclusively designed to send plain text

I have encountered an issue while using the wp_mail() function to send HTML formatted emails. Despite setting the headers to indicate "Content-Type: text/html; charset=UTF-8", all the emails appear as plain text without any formatting. While testing on Wi ...

htmlwordpressemail

Using jQuery to establish a canvas element and define its dimensions by adjusting its width and height attributes

My attempt at using jQuery to create a canvas element was not quite as expected. Here is the code I tried: var newCanvas = $('<canvas/>',{'width':100,'height':200,'class':'radHuh'}); $(body).append(n ...

javascriptjquerycanvashtml

Modify font color in collapsed state of bootstrap navbar dropdown

I've been attempting to modify the font color displayed in the image to ensure it stands out clearly. This is a simple bootstrap 3 navbar. Here's the HTML code: <nav class="navbar navbar-custom"> <div class="container ...

csstwitter-bootstraptwitter-bootstrap-3

What is the best way to arrange a bootstrap .container?

I've been struggling to position a content DIV on a bootstrap carousel, but so far I haven't been successful in figuring it out. Below is a screenshot of the current output from my code, which is not what I am aiming for. What I'm trying t ...

htmlcsstwitter-bootstrapcss-position

Animating a dotted border path in SVG for a progress bar effect

I am attempting to create an animation for a dotted SVG circle that resembles a progress bar, where it fills itself over a duration of 3 seconds. However, I am facing difficulties in achieving this effect with the dotted border. The current code I have doe ...

javascriptjquerycssanimationsvg

"Utilizing FileReader to seamlessly integrate data into FormData without the risk

Currently, I'm in the process of constructing an ajax file uploader. This is made possible thanks to the recently introduced FormData interface. Everything seems to work as expected when using the original file. However, I encounter issues when conver ...

javascriptajaxhtml

A guide to deactivating the Material UI Link API element

Previously, I relied on Material UI's Button component with a disable property that allowed the button to be disabled based on a boolean value. However, I now want to use the Material UI Link component, which resembles a text link but functions like a ...

javascriptcssreactjsmaterial-ui