Permalink
Browse files

css3 animations - examples

  • Loading branch information...
0 parents commit 51e483345c9887aa02099e2e8f508dca02468121 @edercosta committed Apr 17, 2012
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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>
@@ -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; }

0 comments on commit 51e4833

Please sign in to comment.