themes
/
casper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add keyframe animations to the home page header

This commit is contained in:
Paul Adam Davis 2014-07-11 09:49:40 +01:00
parent e9725f1ac6
commit 11008f9831
1 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
assets/css/screen.css
View File

@ -16,6 +16,7 @@
9. Footer
10. Media Queries (Tablet)
11. Media Queries (Mobile)
12. Animations
*/
@ -460,6 +461,11 @@ margin on the iframe, cause it breaks stuff. */
background-size: cover;
}
.site-head .blog-logo img {
-webkit-animation: fade-in-down 1s;
animation: fade-in-down 1s;
}
.blog-logo {
text-decoration: none;
}
@ -481,6 +487,10 @@ margin on the iframe, cause it breaks stuff. */
font-weight: bold;
font-family: 'Open Sans', sans-serif;
text-shadow: 0 1px 6px rgba(0,0,0,0.1);
-webkit-animation: fade-in-down 1s;
animation: fade-in-down 1s;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.blog-description {
@ -491,6 +501,10 @@ margin on the iframe, cause it breaks stuff. */
font-family: 'Noto Serif', serif;
letter-spacing: 0;
text-shadow: 0 1px 3px rgba(0,0,0,0.15);
-webkit-animation: fade-in-down 1s;
animation: fade-in-down 1s;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
/* Every post, on every page, gets this style on its <article> tag */
@ -1015,11 +1029,11 @@ margin on the iframe, cause it breaks stuff. */
}
/* ==========================================================================
11. Media Queries - Smaller than 500px
========================================================================== */
@media only screen and (max-width: 500px) {
.blog-logo img {
@ -1144,6 +1158,40 @@ margin on the iframe, cause it breaks stuff. */
}
/* ==========================================================================
12. Animations
========================================================================== */
@-webkit-keyframes fade-in-down {
from {
opacity: 0;
-webkit-transform: translateY(-7px);
},
to {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fade-in-down {
from {
opacity: 0;
-moz-transform: translateY(-7px);
-ms-transform: translateY(-7px);
-o-transform: translateY(-7px);
transform: translateY(-7px);
},
to {
opacity: 0;
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
}
/* ==========================================================================
End of file. Media queries should be the last thing here. Do not add stuff
below this point, or it will probably fuck everything up.