Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/CSS3 Animated Clouds.markdown

Forked from anonymous/CSS3 Animated Clouds.markdown
Created May 20, 2016 14:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CodeMyUI/e04b6325dcc648fb699ffa4d370d1b0a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CodeMyUI/e04b6325dcc648fb699ffa4d370d1b0a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist May 20, 2016.
    7 changes: 7 additions & 0 deletions CSS3 Animated Clouds.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    CSS3 Animated Clouds
    --------------------
    Just some CSS3 Animations to recreate the sky.

    A [Pen](http://codepen.io/montanaflynn/pen/orxwK) by [Montana Flynn](http://codepen.io/montanaflynn) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/montanaflynn/pen/orxwK/license).
    13 changes: 13 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    <head>
    <meta charset='UTF-8'>
    <title>CSS3 Cloud Animations By Montana Flynn</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>
    200 changes: 200 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,200 @@
    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%
    }
    }