Landscape Animation
How do I make an landscape animation?
A simple mock-up of CSS3 animations. Just having some fun in making the things move and reappear so on. Thank you http://iconmonstr.com/ for the clouds!. What is a landscape animation? How do you make a landscape animation? This script and codes were developed by Saysora on 26 August 2022, Friday.
Landscape Animation Previews
Landscape Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Landscape Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="sky"> <div class="cloud" id="distant"> <img src="http://s.cdpn.io/26158/cloud_1.png" width="100px" height="auto"> </div> <div class="cloud" id="sidetoside"> <img src="http://s.cdpn.io/26158/cloud_1.png"> </div> <div class="cloud" id="farthest"> <img src="http://s.cdpn.io/26158/cloud_1.png" width="20%" height="auto"> </div> <div class="moon" id="shoot"></div>
</div>
<div class="grass" id="shade"> <div class="rabbit" id="right-left"> <img src="http://s.cdpn.io/26158/rabbit.png"> </div>
</div>
<div id="wrap">
</div> <script src="js/index.js"></script>
</body>
</html>Landscape Animation - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
body { overflow: hidden; -webkit-animation: makeitblue 6s linear; -moz-animation: makeitblue 6s linear; -o-animation: makeitblue 6s linear; animation: makeitblue 6s linear; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
#wrap { width: 960px; max-width: 100%; min-height: 50px; margin: 10px auto; overflow: hidden;
}
.cloud { width: 200px; height: 200px;
}
.cloud img { float: right;
}
.grass { width: 100%; height: 30%; background: #42ba70; position: absolute; bottom: 0; z-index: 75; border-top: 1px solid #000;
}
.moon { width: 120px; height: 120px; background: #ebebeb; position: absolute; top: 10%; right: 20%; border-radius: 70px; -webkit-box-shadow: 1px 0 5px 1px #000; -moz-box-shadow: 1px 0 5px 1px #000; -o-box-shadow: 1px 0 5px 1px #000; box-shadow: 1px 0 5px 1px #000;
}
#sidetoside { position: absolute; top: 15%; left: 0; z-index: 50; -webkit-animation: sidetoside 145s linear infinite; -moz-animation: sidetoside 145s linear infinite; -o-animation: sidetoside 145s linear infinite; animation: sidetoside 145s linear infinite;
}
#distant { position: absolute; top: 20%; z-index: 5; -webkit-animation: distant 65s linear infinite; -moz-animation: distant 65s linear infinite; -o-animation: distant 65s linear infinite; animation: distant 65s linear infinite;
}
#farthest { position: absolute; top: 60%; z-index: 1; -webkit-animation: farthest 35s linear infinite; -moz-animation: farthest 35s linear infinite; -o-animation: farthest 35s linear infinite; animation: farthest 35s linear infinite;
}
#shoot { -webkit-animation: shooting 7s linear; -moz-animation: shooting 7s linear; -o-animation: shooting 7s linear; animation: shooting 7s linear;
}
#shade { -webkit-animation: shadow 6s linear; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.rabbit { width: 65px; height: 31px; top: -25px; right: 0; position: absolute;
}
#right-left { -webkit-animation: quickest 2s; -moz-animation: quickest 2s; -o-animation: quickest 2s; animation: quickest 2s; -webkit-animation-delay: 5s; -moz-animation-delay: 5s; -o-animation-delay: 5s; animation-delay: 5s; opacity: 0;
}
@-webkit-keyframes sidetoside { 0% { width: 0; } 100% { width: 110%; }
}
@-moz-keyframes sidetoside { 0% { width: 0; } 100% { width: 110%; }
}
@-o-keyframes sidetoside { 0% { width: 0; } 100% { width: 110%; }
}
@keyframes sidetoside { 0% { width: 0; } 100% { width: 110%; }
}
@-webkit-keyframes distant { 0% { width: 0; } 100% { width: 110%; }
}
@-moz-keyframes distant { 0% { width: 0; } 100% { width: 110%; }
}
@-o-keyframes distant { 0% { width: 0; } 100% { width: 110%; }
}
@keyframes distant { 0% { width: 0; } 100% { width: 110%; }
}
@-webkit-keyframes shooting { 0% { top: 100%; } 100% { top: 10%; }
}
@-moz-keyframes shooting { 0% { top: 100%; } 100% { top: 10%; }
}
@-o-keyframes shooting { 0% { top: 100%; } 100% { top: 10%; }
}
@keyframes shooting { 0% { top: 100%; } 100% { top: 10%; }
}
@-webkit-keyframes makeitblue { 0% { background: #4aa1d2; } 100% { background: #3a51a4; }
}
@-moz-keyframes makeitblue { 0% { background: #4aa1d2; } 100% { background: #3a51a4; }
}
@-o-keyframes makeitblue { 0% { background: #4aa1d2; } 100% { background: #3a51a4; }
}
@keyframes makeitblue { 0% { background: #4aa1d2; } 100% { background: #3a51a4; }
}
@-webkit-keyframes shadow { 100% { background: #3aa463; }
}
@-moz-keyframes shadow { 100% { background: #3aa463; }
}
@-o-keyframes shadow { 100% { background: #3aa463; }
}
@keyframes shadow { 100% { background: #3aa463; }
}
@-webkit-keyframes farthest { 0% { right: 0; } 100% { right: 110%; }
}
@-moz-keyframes farthest { 0% { right: 0; } 100% { right: 110%; }
}
@-o-keyframes farthest { 0% { right: 0; } 100% { right: 110%; }
}
@keyframes farthest { 0% { right: 0; } 100% { right: 110%; }
}
@-webkit-keyframes quickest { 0% { right: 0; opacity: 0; } 25% { opacity: 1; } 100% { right: 110%; }
}
@-moz-keyframes quickest { 0% { right: 0; opacity: 0; } 25% { opacity: 1; } 100% { right: 110%; }
}
@-o-keyframes quickest { 0% { right: 0; opacity: 0; } 25% { opacity: 1; } 100% { right: 110%; }
}
@keyframes quickest { 0% { right: 0; opacity: 0; } 25% { opacity: 1; } 100% { right: 110%; }
}
Landscape Animation - Script Codes JS Codes
/****************************************************** Simple Animations for a Landscape Scenario. All CSS3
*******************************************************/
| Developer | Saysora |
| Username | azureknight |
| Uploaded | August 26, 2022 |
| Rating | 3 |
| Size | 3,469 Kb |
| Views | 26,312 |
Do you need developer help for Landscape Animation?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Saysora (azureknight) Script Codes
| Name | Size |
| Beautiful Ribbon | 1,985 Kb |
| Grow Circle Animation | 2,075 Kb |
| Flat UI Login | 3,358 Kb |
| Responsive Background | 2,168 Kb |
| Clean Card Layout | 3,654 Kb |
| Service Card Animation | 3,567 Kb |
| A Pen by Saysora | 2,253 Kb |
| CSS Tab Holder | 3,445 Kb |
| Flat Ui Rollover Buttons | 3,312 Kb |
| Legend of Zelda - Triforce | 2,530 Kb |
Create amazing SEO content with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| About Mazano | Kiti | 2,585 Kb |
| Intake Form Page 2 | Ijantje | 4,983 Kb |
| Basecamp 3 Document | Lachlanjc | 3,811 Kb |
| Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
| Resize image | Happyhj | 1,892 Kb |
| Flex Chart | James_zedd | 4,111 Kb |
| Matrix | Stathisnikolaidis | 1,922 Kb |
| CSS3 Media Queries demo | Machal | 1,824 Kb |
| Basic jQuery Filter list | Mtedwards | 2,464 Kb |
| Polo, the flying squirrel | Agbales | 2,445 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!