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

Tips for navigating a user to a different HTML page using JSP code?

In my html page Login.html, I have set up a simple login form with username and password fields, along with a submit button. When the user clicks on the submit button, it triggers a JSP page named Login.jsp to validate the entered credentials against an ...

javahtmljsp

What is causing this div to automatically assume a width of 900 pixels?

There is only one specific instance where I have set a div width to 900 px, and it is located further up the DOM within a div called #Ba. This is where the width is being derived from. My intention is for it to simply take on the width of its containing e ...

css

AngularJS: Validators in Controller do not directly bind with HTML elements

The in-line validations on the HTML side are functioning properly, but when I utilize functions in my Controller (specifically ingresarNuevoEmpleador and limpiarNuevoEmpleador), the $invalid value is always true. Additionally, $setPristine does not seem to ...

javascripthtmlangularjsvalidation

Modify File Name with Fine Uploader: Personalize Your File Titles

When attempting to save files with a specific directory structure in my S3 bucket, I am encountering an issue where the getName method only returns the reference instead of the actual value of the file name. The output of getName is displayed as [object O ...

javascriptjqueryamazon-s3fine-uploader

The "scrollTop" function seems to be malfunctioning in Firefox but works perfectly fine in Chrome. Is there a way to fix this issue?

Issue with scrollTop in Firefox jQuery(window).scroll(function(){ var NextScroll = jQuery(this).scrollTop(); if (NextScroll >= 800){ jQuery('#logomacchia').addClass("maccancello"); } else { jQuery('#logomacch ...

javascriptjquerywordpress

"Troubleshooting the issue of null values in ASP.NET Core Razor Pages when using Ajax POST

I'm currently working on an ASP.NET (6.0) Razor Pages project where I am facing an issue with posting data using AJAX. Despite my efforts, the posted data always ends up being null. Even after going through similar questions on Stack Overflow, I have ...

jqueryajaxasp.net-corerazor-pagesfrombodyattribute

Unresolved conflict stemming from an HTML closing tag in the index.html file, despite both source and destination files being identical

I am currently facing a challenge while trying to merge my code with the master branch through a pull request. The conflict arises in the src/index.html file, specifically on line 17 which states </html> needs to be corrected to </html>. It&apo ...

htmlangularversion-controlbitbucketpull-request

Retrieve JSON data from an external link and showcase it within a div, unfortunately encountering an issue with the functionality

Encountering the error message "XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access" Check out the plunker link for more information: http ...

javascripthtmljsonajaxgetjson

Is it possible to retrieve the values of #select1 and #select2 before initiating the AJAX request?

I am presented with the following snippet of HTML code: <select id="choice1"> <option value="0">Option 0</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3 ...

javascriptjqueryajaxjquery-select2jquery-select2-4

Having trouble with AJAX within AJAX not functioning properly?

Similar to the Facebook commenting system, I am aiming for comments to be appended to previous ones and displayed all at once. However, currently the comments only show up after the page is reloaded. Please Note: Each post initially loads with just two co ...

javascriptjqueryhtmlajaxfacebook

Attempting to utilize a custom element, the message "You attempted to use polymer without loading it first" confirms that it has indeed been imported

I've been experimenting with a custom element for a paper-dialog popup that I want to incorporate. Surprisingly, when I create a test page within the same file where the custom element is defined, using all the identical imports as my main index, it w ...

jqueryhtmlpolymer

Creating consistent image placement across all divs: a step-by-step guide

html { font-family: 'Open Sans', sans-serif; } body {margin: 0; padding: 0; } #wrapper { padding-left:50px; padding-top:30px; } #third, fifth { background-color:#E8E8E8 ; } img[src^="my_menu.png"] { z-index:10; } #s ...

htmlcss

Using the <!DOCTYPE html> tag seems to cause issues with the measurements of div elements

Currently in the process of developing a website, I created this div: #container #content .imagewindow { width: 560; height: 380; background-color: #1E1640; } After adding the doctype html tag, the browser appears to be disregarding my styling commands ...

csshtmldoctype

Tips for adjusting breakpoints in the SCSS of Vuetify version 2?

I am currently using scss files and I want to adjust the breakpoints within the css code in vuetify version 2. Unfortunately, I have not been able to locate any information regarding this in the vuetify upgrade guide. In the previous version 1.5, I utili ...

cssvue.jssassvuetify.js

What is the process for implementing custom CSS styles in Cognos?

I've been working on creating Cognos reports and I'm looking to change the overall design of some specific ones (prompt pages and report pages). Is there a way for me to use different custom CSS files for each individual report? If that's ...

cssbusiness-intelligencecognos

The AJAX callback is unable to access the method of the jQuery plugin

I have a scenario where I am fetching data from an AJAX response and attempting to update a jQuery plugin with that value within the success callback: $.ajax({ url: '/some/url', type: 'GET', dataType: 'json', succ ...

javascriptjquerynode.jsajax

Struggling with textpath SVG elements in jQuery

Currently, I am implementing SVG in my project and aiming to apply the toggleClass function using jQuery on the textpath elements upon clicking. My initial plan was: $("text#names > textpath").click(function() { $(this).toggleClass("newClass"); }) ...

javascriptjqueryhtmlsvgtoggleclass

jQuery live function is not functioning as anticipated

I am facing issues with ajax requests and simple <input type="submit"/>. I have a practice of loading views within other views, in a modular way, using jQuery's .load(url) function to move from one view to another. The problem arises when I loa ...

javascriptjqueryajaxloadlive

Tips for notifying highlighted text in Kendo Editor

How can I provide an alert for a selected text inside the kendo editor? I have attempted the code below <textarea id="editor"></textarea> <script> $("#editor").kendoEditor(); var editor = $("#editor").data("kendoEditor"); var html = edit ...

javascriptjqueryangularjskendo-uikendo-ui-angular2

Tips for extracting the src attribute from a dynamically generated iframe

My dilemma stems from a function that generates an iframe with content on my website, which unfortunately I cannot control as it is loaded remotely. The function initially creates: <span id="myspan"></span> Once the JavaScript function fu ...

javascripthtmliframe