css3 animations - examples

edercosta · Apr 17, 2012 · 51e4833 · 51e4833
commit 51e4833
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 0 deletions.
diff --git a/images/logo-zigotto.png b/images/logo-zigotto.png
diff --git a/images/smoke-1.png b/images/smoke-1.png
diff --git a/images/smoke-2.png b/images/smoke-2.png
diff --git a/images/smoke-3.png b/images/smoke-3.png
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Logo Zigotto</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
+  </head>
+  <body>
+    <img src="images/logo-zigotto.png" class="brand-zigotto"/>
+    <div class="smoke" id="move-1"></div>
+    <div class="smoke" id="move-2"></div>
+    <div class="smoke" id="move-3"></div>
+  </body>
+</html>
diff --git a/stylesheets/style.css b/stylesheets/style.css
@@ -0,0 +1,25 @@
+@-webkit-keyframes smoke-fadeInOut { 
+  0% { opacity: 0; -webkit-transform: translatey(50px); }
+  50% { opacity: 1; -webkit-transform: translatey(25px); }
+  100% {opacity: 0; -webkit-transform: translatey(0); }
+}
+
+@-moz-keyframes smoke-fadeInOut {
+  0% { opacity: 0; -moz-transform: translatey(50px); }
+  50% {opacity: 1; -moz-transform: translatey(25px); }
+  100% { opacity: 0; -moz-transform: translatey(0); }
+}
+
+body { background: #666; }
+.brand-zigotto { position: relative; top: 150px; left: 150px; z-index: 1; }
+.smoke { position: absolute; display: block; top: 40px; left: 140px; width: 200px; height: 200px;
+  -webkit-animation: smoke-fadeInOut 3s linear;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation: smoke-fadeInOut 3s linear;
+  -moz-animation-iteration-count: infinite;
+  -ms-animation: smoke-fadeInOut 3s linear;
+  -ms-animation-iteration-count: infinite;
+}
+.smoke#move-1 { background: url(../images/smoke-1.png); }
+.smoke#move-2 { background: url(../images/smoke-2.png); -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -ms-animation-delay: 0.5s; }
+.smoke#move-3 { background: url(../images/smoke-3.png); -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -ms-animation-delay: 1.5s; }