A Simple Scene Animated with CSS3

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>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ml

md5算法原理一窥(其一)

    首先,需要了解的事,md5并不是传说中的加密算法,只是一种散列算法。其加密的算法并不是我们说所的那样固定不变,只是一种映射的关系。 所以解密MD5没有现...

3957
来自专栏Netkiller

以太坊 Iban 地址

中国广东省深圳市龙华新区民治街道溪山美地 518131 +86 13113668890 <netkiller@msn.com>

42216
来自专栏MelonTeam专栏

Bitmap 源码阅读笔记

导语: Android 系统上的图片的处理,跟Bitmap 这个类脱不了关系,我们有必要去深入阅读里面的源码,以便在工作中能更好的处理Bitmap相关的问题...

2608
来自专栏linux驱动个人学习

高通Audio中ASOC的machine驱动

ASoC被分为Machine、Platform和Codec三大部分,其中的Machine驱动负责Platform和Codec之间的耦合以及部分和设备或板子特定的...

1K4
来自专栏余生开发

echarts太阳分布图-饼图来回穿梭

var dom = document.getElementById("container");

1442
来自专栏Jerry的SAP技术分享

如何在SAP CRM里创建和消费Web service

The following steps demonstrates how to expose a function module as a web servic...

941
来自专栏专知

2018年SCI期刊最新影响因子排行,最高244,人工智能TPAMI9.455

2018年6月26日,最新的SCI影响因子正式发布,涵盖1万2千篇期刊。CA-Cancer J Clin 依然拔得头筹,其影响因子今年再创新高,达244.585...

1482
来自专栏码匠的流水账

聊聊HystrixThreadPool

hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java

931
来自专栏WOLFRAM

错觉艺术的巅峰,错觉图形大师M.C. Escher的不可能方块的可能模型

1423
来自专栏一个会写诗的程序员的博客

java.base.jmod

/Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/jmods$ jmod list java....

1182

扫码关注云+社区