Skip to content

Instantly share code, notes, and snippets.

@qingfeng

qingfeng/css_ani.html

Created June 9, 2009 06:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save qingfeng/126314 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save qingfeng/126314 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css_ani.html
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test CSS Ani</title>
<style type="text/css" media="screen">
body { margin: 0; color: #fff; background: #000; overflow: hidden; }
#header h1, #apple div.icon { color: transparent; }
#apple, #header, #safari { position: absolute; top: 40%; left: 50%; }
#apple { width: 600px; height: 538px; margin: -290px 0 0 -290px; overflow: hidden; }
#apple div { position: absolute; width: 600px; height: 538px; opacity: 0; filter: alpha(opacity=0); }
#apple div.icon { z-index: 3; background: url(http://images.apple.com/safari/welcome/images/apple_icon.png) no-repeat 233px 184px; }
#apple div.spots { z-index: 4; background: url(http://images.apple.com/safari/welcome/images/apple_spots.png) no-repeat 195px 133px; }
#apple div.flare { z-index: 1; background: url(http://images.apple.com/safari/welcome/images/apple_flare.jpg) no-repeat 0 0; }
#header { width: 600px; height: 60px; margin: -43px 0 0 -300px; opacity: 0; filter: alpha(opacity=0); }
#header h1 { width: 100%; height: 100%; margin: 0; background: url(http://img.f.hatena.ne.jp/images/fotolife/y/yanxu/20090609/20090609140322.jpg) no-repeat 0 0;
-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.4)));
}
/*------------------------
animations
------------------------*/
/* apple keyframes */
@-webkit-keyframes apple-icon {
from {
opacity: 0;
-webkit-transform: scale(3);
-webkit-animation-timing-function: ease-out;
}
22% {
opacity: 1;
-webkit-transform: scale(1.1);
-webkit-animation-timing-function: linear;
}
30% {
opacity: 1;
-webkit-transform: scale(1);
-webkit-animation-timing-function: linear;
}
82% {
opacity: 1;
-webkit-transform: scale(0.92);
-webkit-animation-timing-function: ease-out;
}
to {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-in;
}
}
@-webkit-keyframes apple-spots {
from {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-out;
}
22% {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-out;
}
30% {
opacity: 1;
-webkit-transform: scale(1);
-webkit-animation-timing-function: ease-in;
}
82% {
opacity: 1;
-webkit-transform: scale(0.92) rotate(10deg);
-webkit-animation-timing-function: ease-out;
}
to {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-in;
}
}
@-webkit-keyframes apple-flare {
from {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-out;
}
22% {
opacity: 0;
-webkit-transform: scale(0.2) translateX(-20px) translateY(-100px);
-webkit-animation-timing-function: ease-out;
}
30% {
opacity: 1;
-webkit-transform: scale(1);
-webkit-animation-timing-function: linear;
}
82% {
opacity: 1;
-webkit-transform: scale(0.92);
-webkit-animation-timing-function: ease-out;
}
to {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-in;
}
}
/* text keyframes */
@-webkit-keyframes header {
from {
opacity: 0;
-webkit-transform: scale(2.6);
-webkit-animation-timing-function: linear;
}
20% {
opacity: 1;
-webkit-transform: scale(1);
-webkit-animation-timing-function: linear;
}
77% {
opacity: 1;
-webkit-transform: scale(0.9);
-webkit-animation-timing-function: linear;
}
to {
opacity: 0;
-webkit-transform: scale(0.1);
-webkit-animation-timing-function: linear;
}
}
/* apple timing */
/* body.go #apple div {
-webkit-animation-delay: 0.5s;
-webkit-animation-duration: 1.7s;
}
*/ body.go #apple div.icon {
-webkit-animation-delay: 0.5s;
-webkit-animation-duration: 1.7s;
-webkit-animation-name: apple-icon;
}
body.go #apple div.spots {
-webkit-animation-delay: 0.5s;
-webkit-animation-duration: 1.7s;
-webkit-animation-name: apple-spots;
}
body.go #apple div.flare {
-webkit-animation-delay: 0.5s;
-webkit-animation-duration: 1.7s;
-webkit-animation-name: apple-flare;
}
/* text timing */
body.go #header {
-webkit-animation-delay: 2.2s;
-webkit-animation-duration: 1.5s;
-webkit-animation-name: header;
}
</style>
</head>
<body class="go">
<div id="header">
<h1>Welcome</h1>
</div>
<div id="apple">
<div class="icon"></div>
<div class="spots"></div>
<div class="flare"></div>
<div class="flareicon"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment