vividboarder/Vivid-Casper
1
0
Fork 0
mirror of https://github.com/ViViDboarder/Vivid-Casper.git synced 2024-12-23 03:57:38 +00:00
Code Issues Releases Wiki Activity

Add keyframe animations to the home page header

Browse Source
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

52
assets/css/screen.css
View File

@ -14,8 +14,9 @@
7. Third Party Elements 7. Third Party Elements
8. Pagination 8. Pagination
9. Footer 9. Footer
10. Media Queries (Tablet) 10. Media Queries (Tablet)
11. Media Queries (Mobile) 11. Media Queries (Mobile)
12. Animations
*/ */
@ -460,6 +461,11 @@ margin on the iframe, cause it breaks stuff. */
background-size: cover; background-size: cover;
} }
.site-head .blog-logo img {
-webkit-animation: fade-in-down 1s;
animation: fade-in-down 1s;
}
.blog-logo { .blog-logo {
text-decoration: none; text-decoration: none;
} }
@ -481,6 +487,10 @@ margin on the iframe, cause it breaks stuff. */
font-weight: bold; font-weight: bold;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
text-shadow: 0 1px 6px rgba(0,0,0,0.1); 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 { .blog-description {
@ -491,6 +501,10 @@ margin on the iframe, cause it breaks stuff. */
font-family: 'Noto Serif', serif; font-family: 'Noto Serif', serif;
letter-spacing: 0; letter-spacing: 0;
text-shadow: 0 1px 3px rgba(0,0,0,0.15); 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 */ /* 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 11. Media Queries - Smaller than 500px
========================================================================== */ ========================================================================== */
@media only screen and (max-width: 500px) { @media only screen and (max-width: 500px) {
.blog-logo img { .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 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. below this point, or it will probably fuck everything up.