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

Merge pull request #107 from PaulAdamDavis/master 

Add keyframe animations to the home page header
This commit is contained in:
John O'Nolan 2014-07-11 11:36:39 +02:00
parent e9725f1ac6 11008f9831
commit faeee8d8a0
1 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
assets/css/screen.css
View File

@ -14,8 +14,9 @@
7. Third Party Elements
8. Pagination
9. Footer
10. Media Queries (Tablet)
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.