A Simple Scene Animated with CSS3

于 2013-03-05 11:44:33 发布
阅读量538 收藏
点赞数

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>

hsany330
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值