Just some CSS3 Animations to recreate the sky.
A Pen by Montana Flynn on CodePen.
Created
May 20, 2016 14:22
-
-
Save anonymous/3c2b6cda33f226827e3de217065f84b3 to your computer and use it in GitHub Desktop.
CSS3 Animated Clouds
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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% | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment