<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Animated CSS3 Keyframes - Live Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://www.templatemonster.com/favicon.ico">
<link rel="icon" href="http://www.templatemonster.com/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
</head>
<body>
<div id="w">
<header>
<!-- logo source http://shaboopie.com/writers-blog-logo/ -->
<div id="logo"><a href="index.html"><img src="images/logo.png" alt="writersblog logo"></a></div>
<div id="socialbuttons">
<span id="twittericon"><a href="https://twitter.com/templatemonster"><img src="images/twitter.png" alt="@templatemonster"></a></span>
<span id="facebookicon"><a href="https://www.facebook.com/TemplateMonster"><img src="images/facebook.png" alt="Facebook"></a></span>
</div>
</header>
<section id="content">
<h2>Some Filler Stuff</h2>
<p>Content is copied from <a href="http://bluthipsum.com/">Bluth Ipsum</a>.</p>
<p>She wanted to look 48. I nearly airbrushed her into oblivion. Ended up checking "albino" on the form. How am I supposed to find someone willing to go into that musty old claptrap? Happy Franklin Friday. I'll sacrifice anything for my children.</p>
<p>Chickens don't clap! If you don't start pulling your weight around here its going to be shape up, or…ship up. Hey, Dad. Look at you. You're a year older…and a year closer to death. Oh, yeah. The guy in the $4,000 suit is holding the elevator for a guy who doesn't make that in three months. COME ON!</p>
<p>And although the intervention didn't work, it turned into one of the Bluth family's better parties. The only person that gets Lucille this excited is Gene. WHY was this show cancelled? I mean, COME ON. What do you think about Sudden Valley? It sounds like a salad dressing, but for some reason I don't want to eat it.</p>
<p>Here he comes. Here comes John Wayne.</p>
</section>
</div>
</body>
</html>
CSS code
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, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
background: #f0efee url('images/witewall_3.png'); /* http://subtlepatterns.com/white-wall-3-2/ */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 62.5%;
color: #545454;
line-height: 1;
}
br { display: block; line-height: 2.2em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
/* page content */
#w {
display: block;
width: 850px;
margin: 0 auto;
padding: 0 25px;
background: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55);
box-shadow: 0 1px 2px rgba(0,0,0,0.55);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#w header {
padding-top: 30px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: 1px solid #bcbcbc;
}
#logo {
position: relative;
display: inline;
width: 280px;
height: 120px;
}
#socialbuttons {
position: relative;
display: inline;
width: 170px;
height: 100px;
left: 60px;
top: -180px;
}
#socialbuttons span { margin-right: 5px; }
#content {
display: block;
padding-top: 22px;
padding-bottom: 30px;
}
h2 {
font-family: Georgia, serif;
font-weight: normal;
font-style: italic;
font-size: 3.0em;
line-height: 1.3em;
margin-bottom: 10px;
color: #666;
}
p {
display: block;
font-family: Arial, Tahoma, sans-serif;
color: #535353;
font-size: 1.35em;
line-height: 1.4em;
margin-bottom: 15px;
}
a { color: #508ac6; }
a:hover { color: #7da6d1; }
/* keyframes */
@-webkit-keyframes logomovement {
0% { top: -150px; }
80% { top: 15px; }
100% { top: 0; }
}
@-moz-keyframes logomovement {
0% { top: -150px; }
80% { top: 15px; }
100% { top: 0; }
}
@-o-keyframes logomovement {
0% { top: -150px; }
80% { top: 15px; }
100% { top: 0; }
}
@keyframes logomovement {
0% { top: -150px; }
80% { top: 15px; }
100% { top: 0; }
}
@-webkit-keyframes socialicons {
0% { top: -180px; }
80% { top: 10px; }
100% { top: -15px; }
}
@-moz-keyframes socialicons {
0% { top: -180px; }
80% { top: 10px; }
100% { top: -15px; }
}
@-o-keyframes socialicons {
0% { top: -180px; }
80% { top: 10px; }
100% { top: -15px; }
}
@keyframes socialicons {
0% { top: -180px; }
80% { top: 10px; }
100% { top: -15px; }
}
#logo {
-webkit-animation: logomovement 1s 1 forwards ease-in;
-moz-animation: logomovement 1s 1 forwards ease-in;
-o-animation: logomovement 1s 1 forwards ease-in;
animation: logomovement 1s 1 forwards ease-in;
}
#socialbuttons {
-webkit-animation: socialicons 0.8s 1s 1 forwards ease-in;
-moz-animation: socialicons 0.8s 1s 1 forwards ease-in;
-o-animation: socialicons 0.8s 1s 1 forwards ease-in;
animation: socialicons 0.8s 1s 1 forwards ease-in;
}
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Animated CSS3 Keyframes - Live Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://www.templatemonster.com/favicon.ico">
<link rel="icon" href="http://www.templatemonster.com/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
</head>
<body>
<div id="w">
<header>
<!-- logo source http://shaboopie.com/writers-blog-logo/ -->
<div id="logo"><a href="index.html"><img src="images/logo.png" alt="writersblog logo"></a></div>
<div id="socialbuttons">
<span id="twittericon"><a href="https://twitter.com/templatemonster"><img src="images/twitter.png" alt="@templatemonster"></a></span>
<span id="facebookicon"><a href="https://www.facebook.com/TemplateMonster"><img src="images/facebook.png" alt="Facebook"></a></span>
</div>
</header>
<section id="content">
<h2>Some Filler Stuff</h2>
<p>Content is copied from <a href="http://bluthipsum.com/">Bluth Ipsum</a>.</p>
<p>She wanted to look 48. I nearly airbrushed her into oblivion. Ended up checking "albino" on the form. How am I supposed to find someone willing to go into that musty old claptrap? Happy Franklin Friday. I'll sacrifice anything for my children.</p>
<p>Chickens don't clap! If you don't start pulling your weight around here its going to be shape up, or…ship up. Hey, Dad. Look at you. You're a year older…and a year closer to death. Oh, yeah. The guy in the $4,000 suit is holding the elevator for a guy who doesn't make that in three months. COME ON!</p>
<p>And although the intervention didn't work, it turned into one of the Bluth family's better parties. The only person that gets Lucille this excited is Gene. WHY was this show cancelled? I mean, COME ON. What do you think about Sudden Valley? It sounds like a salad dressing, but for some reason I don't want to eat it.</p>
<p>Here he comes. Here comes John Wayne.</p>
</section>
</div>
</body>
</html>
CSS code
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, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
background: #f0efee url('images/witewall_3.png'); /* http://subtlepatterns.com/white-wall-3-2/ */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 62.5%;
color: #545454;
line-height: 1;
}
br { display: block; line-height: 2.2em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
/* page content */
#w {
display: block;
width: 850px;
margin: 0 auto;
padding: 0 25px;
background: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55);
box-shadow: 0 1px 2px rgba(0,0,0,0.55);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#w header {
padding-top: 30px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: 1px solid #bcbcbc;
}
#logo {
position: relative;
display: inline;
width: 280px;
height: 120px;
}
#socialbuttons {
position: relative;
display: inline;
width: 170px;
height: 100px;
left: 60px;
top: -180px;
}
#socialbuttons span { margin-right: 5px; }
#content {
display: block;
padding-top: 22px;
padding-bottom: 30px;
}
h2 {
font-family: Georgia, serif;
font-weight: normal;
font-style: italic;
font-size: 3.0em;
line-height: 1.3em;
margin-bottom: 10px;
color: #666;
}
p {
display: block;
font-family: Arial, Tahoma, sans-serif;
color: #535353;
font-size: 1.35em;
line-height: 1.4em;
margin-bottom: 15px;
}
a { color: #508ac6; }
a:hover { color: #7da6d1; }
/* keyframes */
@-webkit-keyframes logomovement {
0% { top: -150px; }
80% { top: 15px; }
100% { top: 0; }
}
@-moz-keyframes logomovement {
0% { top: -150px; }
80% { top: 15px; }
100% { top: 0; }
}
@-o-keyframes logomovement {
0% { top: -150px; }
80% { top: 15px; }
100% { top: 0; }
}
@keyframes logomovement {
0% { top: -150px; }
80% { top: 15px; }
100% { top: 0; }
}
@-webkit-keyframes socialicons {
0% { top: -180px; }
80% { top: 10px; }
100% { top: -15px; }
}
@-moz-keyframes socialicons {
0% { top: -180px; }
80% { top: 10px; }
100% { top: -15px; }
}
@-o-keyframes socialicons {
0% { top: -180px; }
80% { top: 10px; }
100% { top: -15px; }
}
@keyframes socialicons {
0% { top: -180px; }
80% { top: 10px; }
100% { top: -15px; }
}
#logo {
-webkit-animation: logomovement 1s 1 forwards ease-in;
-moz-animation: logomovement 1s 1 forwards ease-in;
-o-animation: logomovement 1s 1 forwards ease-in;
animation: logomovement 1s 1 forwards ease-in;
}
#socialbuttons {
-webkit-animation: socialicons 0.8s 1s 1 forwards ease-in;
-moz-animation: socialicons 0.8s 1s 1 forwards ease-in;
-o-animation: socialicons 0.8s 1s 1 forwards ease-in;
animation: socialicons 0.8s 1s 1 forwards ease-in;
}
No comments :
Post a Comment