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 条评论
登录 后参与评论

相关文章

来自专栏龙首琴剑庐

原 微服务Spring Cloud Eur

1633
来自专栏互联网开发者交流社区

Ext简单demo示例

1015
来自专栏知识分享

Duplicate id @+id/imageView, already defined earlier in this layout,android

原文地址http://www.thinksaas.cn/topics/0/448/448554.html  其實這個訊息也是可以解掉的,當然最簡單的解法就是你不...

2657
来自专栏互联网杂技

Express.js 4.0 有加入一個新的 Router 功能

Express.js 4.0 有加入一個新的 Router 功能,它就像一個迷你的應用程式,可以讓應用程式內部的路由撰寫更方便、更有彈性。 Express.js...

2557
来自专栏hbbliyong

Extjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式

1.extjs 给怎么给panel设背景色 设置bodyStyle:'background:#ffc;padding:10px;', var resultsPa...

2696
来自专栏菩提树下的杨过

ExtJs学习笔记(24)-Drag/Drop拖动功能

直接给代码吧,主要重点已经在代码里注释了 Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio...

2109
来自专栏菩提树下的杨过

ExtJs学习笔记(18)_ExtJs嵌入FCK示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...

1835
来自专栏hbbliyong

ExtJS中xtype一览

基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带...

2605
来自专栏.NET开发那点事

asp.net core发布到docker报Microsoft.ApplicationInsights.AspNetCore miss的错误

dotnet core 2.1的asp.net core在docker下部署的时候发生下面的错误。 Error: An assembly specified...

730
来自专栏hotqin888的专栏

ONLYOFFICE支持wps格式文件(wps,et,dps)的协作

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

802

扫码关注云+社区