A Simple Scene Animated with CSS3

最新推荐文章于 2020-08-24 18:28:30 发布
hsany330
最新推荐文章于 2020-08-24 18:28:30 发布
阅读量539
点赞数
A Simple Scene Animated with CSS3 (requires Chrome, Safari, Firefox 5+, or IE10 PP3)
Use the button above to start and reset the animation.
Use the tabs at top right to view the code for each element of the animation. No images, no JavaScript. The only JavaScript on this page is for the button that starts and resets the animation, and for the tabs.
This demo was created for this article on Smashing Magazine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Keyframe Animation Demo</title>
<style>
html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,font,img,ins,kbd,q,s,samp,
small,strike,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	text-align: left;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol,ul {
	list-style: none;
}
q:before,q:after,
blockquote:before,blockquote:after {
	content: "";
}
#container {
	width: 1080px;
	margin: 0 auto;
	overflow: hidden;
	padding: 50px 20px 0 20px;
}
	h1 {
		font-size: 30px;
		padding: 0 0 20px 0;
	}
	h1 span {
		font-size: 18px;
	}
	#left {
		overflow: hidden;
		float: left;
	}
		#left p {
			width: 470px;
			padding: 20px 0 0 0;
			font-family: Arial, Helvetica, sans-serif;
		}
#sky {
	width: 500px;
	height: 500px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	background-color: #525252;
}
#sky.animate {
	-webkit-animation-name: sky;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: sky;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-ms-animation-name: sky;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
	animation-name: sky;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@-webkit-keyframes sky {
	0% {
		background-color: #525252;
	}
	33% {
		background-color: #6293e5;
	}
	66% {
		background-color: #6293e5;
	}
	100% {
		background-color: #525252;
	}
}
@-moz-keyframes sky {
	0% {
		background-color: #525252;
	}
	33% {
		background-color: #6293e5;
	}
	66% {
		background-color: #6293e5;
	}
	100% {
		background-color: #525252;
	}
}
@-ms-keyframes sky {
	0% {
		background-color: #525252;
	}
	33% {
		background-color: #6293e5;
	}
	66% {
		background-color: #6293e5;
	}
	100% {
		background-color: #525252;
	}
}
@keyframes sky {
	0% {
		background-color: #525252;
	}
	33% {
		background-color: #6293e5;
	}
	66% {
		background-color: #6293e5;
	}
	100% {
		background-color: #525252;
	}
}
#ground {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 500px;
	height: 154px;
	background: #6c5228;
	z-index: 4;
}
#ground.animate {
	-webkit-animation-name: ground;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: ground;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-ms-animation-name: ground;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
	animation-name: ground;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@-webkit-keyframes ground {
	0% {
		background: #6c5228;
	}
	33% {
		background: #48a037;
	}
	66% {
		background: #48a037;
	}
	100% {
		background: #6c5228;
	}
}
@-moz-keyframes ground {
	0% {
		background: #6c5228;
	}
	33% {
		background: #48a037;
	}
	66% {
		background: #48a037;
	}
	100% {
		background: #6c5228;
	}
}
@-ms-keyframes ground {
	0% {
		background: #6c5228;
	}
	33% {
		background: #48a037;
	}
	66% {
		background: #48a037;
	}
	100% {
		background: #6c5228;
	}
}
@keyframes ground {
	0% {
		background: #6c5228;
	}
	33% {
		background: #48a037;
	}
	66% {
		background: #48a037;
	}
	100% {
		background: #6c5228;
	}
}
#sun {
	background: #ffd630;
	width: 130px;
	height: 130px;
	position: absolute;
	border-radius: 70px;
	z-index: 2;
	bottom: 0;
	left: 340px;
}
#sun.animate {
	-webkit-animation-name: sunrise;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: sunrise;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-ms-animation-name: sunrise;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
	animation-name: sunrise;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@-webkit-keyframes sunrise {
	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}
	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}
	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}
}
@-moz-keyframes sunrise {
	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}
	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}
	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}
}
@-ms-keyframes sunrise {
	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}
	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}
	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}
}
@keyframes sunrise {
	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}
	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}
	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}
}
#cloud {
	position: relative;
	top: 50px;
	left: -100px;
	opacity: 0;
	z-index: 3;
}
#cloud.animate {
	-webkit-animation-name: cloud;
	-webkit-animation-duration: 12s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: cloud;
	-moz-animation-duration: 12s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-ms-animation-name: cloud;
	-ms-animation-duration: 12s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
	animation-name: cloud;
	animation-duration: 12s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@-webkit-keyframes cloud {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 1;
		left: 60px;
	}
	75% {
		opacity: 1;
		left: 100px;
	}
	100% {
		opacity: 0;
		left: 500px;
	}
}
@-moz-keyframes cloud {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 1;
		left: 60px;
	}
	75% {
		opacity: 1;
		left: 100px;
	}
	100% {
		opacity: 0;
		left: 500px;
	}
}
@-ms-keyframes cloud {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 1;
		left: 60px;
	}
	75% {
		opacity: 1;
		left: 100px;
	}
	100% {
		opacity: 0;
		left: 500px;
	}
}
@keyframes cloud {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 1;
		left: 60px;
	}
	75% {
		opacity: 1;
		left: 100px;
	}
	100% {
		opacity: 0;
		left: 500px;
	}
}
.cloud {
	border-radius: 90px / 30px;
	width: 160px;
	height: 50px;
	background: #fff;
	position: absolute;
	top: 10px;
}
.cloud-2 {
	left: 50px;
	top: 0;
}
.cloud-3 {
	left: 110px;
	top: 20px;
}
#moon {
	position: relative;
	opacity: 0;
	top: 50px;
	left: -100px;
}
#moon.animate {
	-webkit-animation-name: moon;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: moon;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-ms-animation-name: moon;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
	animation-name: moon;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@-webkit-keyframes moon {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 0;
		left: -100px;
	}
	90% {
		opacity: 0;
		left: -100px;
	}
	100% {
		opacity: 1;
		left: 50px;
	}
}
@-moz-keyframes moon {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 0;
		left: -100px;
	}
	90% {
		opacity: 0;
		left: -100px;
	}
	100% {
		opacity: 1;
		left: 50px;
	}
}
@-ms-keyframes moon {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 0;
		left: -100px;
	}
	90% {
		opacity: 0;
		left: -100px;
	}
	100% {
		opacity: 1;
		left: 50px;
	}
}
@keyframes moon {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 0;
		left: -100px;
	}
	90% {
		opacity: 0;
		left: -100px;
	}
	100% {
		opacity: 1;
		left: 50px;
	}
}
	.moon {
		width: 100px;
		height: 100px;
		border-radius: 50px;
		background: #fff;
		position: absolute;
	}
	.moon-2 {
		background: #525252;
		position: absolute;
		top: -20px;
		left: 20px;
	}
#code {
	float: left;
	margin: 0 0 0 20px;
	width: 494px;
}
ul.headers {
	overflow: hidden;
}
	ul.headers li {
		float: left;
		width: 85px;
		border: dashed 1px #ccc;
		margin: 0 4px;
	}
	ul.headers li a {
		display: block;
		text-decoration: none;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		text-align: center;
		padding: 10px;
	}
	ul.headers li a:hover, ul.headers li a:active {
		background: #ccc;
		color: #fff;
	}
#tab_content {
	border: #ccc 1px dashed;
	margin: 20px 0 20px 3px;
	padding: 0 0 20px 10px;
	width: 456px;
}
div.tab {
	font-family: Arial, Helvetica, sans-serif;
	margin: 30px 0 0 10px;
}
div.tab pre {
	font-family: "Courier New", Courier, monospace;
	font-size: 13px;
}
input[type="button"] {
	margin: 20px 0 0 165px;
	padding: 5px;
}
</style>
</head>
<body style="width: 98%;">
<div id="container">
	<h1>A Simple Scene Animated with CSS3 <span>(requires Chrome, Safari, Firefox 5+, or IE10 PP3)</span></h1>
	<div id="left">
		<div id="sky" class="target">
			<div id="cloud" class="target">
				<div class="cloud cloud-1"></div>
				<div class="cloud cloud-2"></div>
				<div class="cloud cloud-3"></div>
			</div>
			<div id="sun" class="target"></div>
			<div id="moon" class="target">
				<div class="moon">
				</div>
				<div class="moon moon-2">
				</div>
			</div>
			<div id="ground" class="target"></div>
		</div><!-- #sky -->
		<input type="button" value="ANIMATE THE SCENE" id="startbutton">
		<p><strong>Use the button above to start and reset the animation.</strong></p>
		<p>Use the tabs at top right to view the code for each element of the animation. No images, no JavaScript. The only JavaScript on this page is for the button that starts and resets the animation, and for the tabs.</p>
		<p>This demo was created for <a href="http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/">this article</a> on Smashing Magazine.</p>
	</div><!-- #left -->
	<div id="code">
		<div id="sidebar_tabs">
			<ul class="headers">
				<li><a href="#" class="tablink">Sun</a></li>
				<li><a href="#" class="tablink">Sky</a></li>
				<li><a href="#" class="tablink">Ground</a></li>
				<li><a href="#" class="tablink">Cloud</a></li>
				<li><a href="#" class="tablink">Moon</a></li>
			</ul>
			<div id="tab_content">
				<div class="tab tab1">
<pre>
#sun.animate {
	animation-name: sunrise;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@keyframes sunrise {
	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}
	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}
	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}
}
</pre>
				</div>
				<div class="tab tab2">
<pre>
#sky.animate {
	animation-name: sky;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@keyframes sky {
	0% {
		background-color: #525252;
	}
	33% {
		background-color: #6293e5;
	}
	66% {
		background-color: #6293e5;
	}
	100% {
		background-color: #525252;
	}
}
</pre>
				</div>
				<div class="tab tab3">
<pre>
#ground.animate {
	animation-name: ground;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@keyframes ground {
	0% {
		background: #6c5228;
	}
	33% {
		background: #48a037;
	}
	66% {
		background: #48a037;
	}
	100% {
		background: #6c5228;
	}
}
</pre>
				</div>
				<div class="tab tab4">
<pre>
#cloud.animate {
	animation-name: cloud;
	animation-duration: 12s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@keyframes cloud {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 1;
		left: 100px;
	}
	100% {
		opacity: 0;
		left: 500px;
	}
}
</pre>
				</div>
				<div class="tab tab5">
<pre>
#moon.animate {
	animation-name: moon;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@keyframes moon {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 0;
		left: -100px;
	}
	90% {
		opacity: 0;
		left: -100px;
	}
	100% {
		opacity: 1;
		left: 50px;
	}
}</pre>
				</div>
			</div><!-- #tab_content -->
		</div><!-- #sidebar_tabs -->
	</div><!-- #code -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function () {
	var s = null,
	AnimationSpace = {
		settings: {
			tabHeaders: null,
			tabSections: null,
			currentIndex: null,
			speed: 800,
			collection: null,
			i: null,
			j: null,
			startButton: $("#startbutton")
		},
		init: function () {
			s = this.settings;
			s.tabSections = $("div.tab");
			$(s.tabSections[0]).slideDown(s.speed);
			$(s.tabSections[1]).slideUp(s.speed);
			$(s.tabSections[2]).slideUp(s.speed);
			$(s.tabSections[3]).slideUp(s.speed);
			$(s.tabSections[4]).slideUp(s.speed);
			this.getClickedTab();
			this.startAnimation();
		},
		getClickedTab: function () {
			s = this.settings;
			s.tabHeaders = $("#sidebar_tabs ul.headers a");
			s.collection = $("#tab_content div.tab");
			$(s.tabHeaders).click(function () {
				s.currentIndex = $(this).parent().index();
				for (s.i = 0, s.j = s.collection.length; s.i < s.j; s.i += 1) {
					if (s.i !== s.currentIndex) {
						$(s.tabSections[s.i]).slideUp(s.speed);
					} else {
						$(s.tabSections[s.i]).slideDown(s.speed);
					}
				}
				return false;
			});
		},
		startAnimation: function () {
			s = this.settings;
			s.startButton.click(function() {
				$("div.target").toggleClass("animate");
				if (s.startButton.attr("value") === "ANIMATE THE SCENE") {
					s.startButton.attr("value", "RESET THE ANIMATION");
				} else {
					s.startButton.attr("value", "ANIMATE THE SCENE");
				}
			});
		}
	};
	AnimationSpace.init();
});
</script>
</body>
</html>