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

相关文章

来自专栏糊一笑

移动端Webapp中的那些Bug

持续更新… 测试浏览器 Chrome: 61.0.3163.73 Safari: 10.0(IOS 10.3.3) Github: webapp-bugs 1....

5464
来自专栏跟着阿笨一起玩NET

关于MDI窗体的那些问题

如果Main窗口为MDI窗口,只需要设置属性IsMdiContainer为Ture;弹出来的窗体添加如下代码就可以让子窗口在父窗体中嵌套弹出。

572
来自专栏无所事事者爱嘲笑

h5软键盘挡住输入框问题解决(android)

在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题,ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第...

1331
来自专栏Spring相关

弹幕和回到顶部前端web

623
来自专栏游戏杂谈

as3翻牌动画

----------------------------------------------------

522
来自专栏Spring相关

Vue路由-命名视图实现经典布局

844
来自专栏游戏杂谈

Flash对象插入到网页中的3px问题

我记得我已经遇到过,不过今天又遇到了,而且浪费了大量的时候在上面,甚至怀疑自己写的脚本有问题,花了几乎一个下午来调试这个问题。最后发现是样式导致的…

823
来自专栏数据结构与算法

菜鸡博客开……开……开源了!

因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家!

1063
来自专栏一“技”之长

Bootstrap响应式前端框架笔记四——表单

    在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布局表单时...

611
来自专栏Java帮帮-微信公众号-技术文章全总结

JS之浏览器对象BOM

DOM Window 代表窗体 DOM History 历史记录 DOM Location 浏览器导航 重点:window、history、location ,...

3759

扫码关注云+社区