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

Updated homepage load-in animations

This commit is contained in:
John O'Nolan 2014-07-11 12:22:28 +02:00
parent faeee8d8a0
commit 75fd290804
1 changed files with 93 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
assets/css/screen.css
View File

@ -461,11 +461,6 @@ 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;
} }
@ -487,10 +482,6 @@ 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 {
@ -501,10 +492,34 @@ 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);
}
/* Add subtle load-in animation for content on the home page */
.home-template .site-head {
-webkit-animation: fade-in-down-subtle 2s;
animation: fade-in-down-subtle 2s;
}
.home-template .blog-logo img {
-webkit-animation: fade-in-down 1s; -webkit-animation: fade-in-down 1s;
animation: fade-in-down 1s; animation: fade-in-down 1s;
-webkit-animation-delay: 0.4s; -webkit-animation-delay: 0.3s;
animation-delay: 0.4s; animation-delay: 0.3s;
}
.home-template .blog-title {
-webkit-animation: fade-in-down 1s;
animation: fade-in-down 1s;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.home-template .blog-description {
-webkit-animation: fade-in-down 1s;
animation: fade-in-down 1s;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.home-template .content {
-webkit-animation: fade-in-up-subtle 2s;
animation: fade-in-up-subtle 2s;
} }
/* Every post, on every page, gets this style on its <article> tag */ /* Every post, on every page, gets this style on its <article> tag */
@ -1164,35 +1179,83 @@ margin on the iframe, cause it breaks stuff. */
========================================================================== */ ========================================================================== */
@-webkit-keyframes fade-in-down { @-webkit-keyframes fade-in-down {
from { 0% {
opacity: 0; opacity: 0;
-webkit-transform: translateY(-7px); -webkit-transform: translateY(-5px);
}, }
to { 60% {
opacity: 1; opacity: 1;
}
100% {
-webkit-transform: translateY(0);
}
}
@keyframes fade-in-down {
0% {
opacity: 0;
-webkit-transform: translateY(-5px);
}
60% {
opacity: 1;
}
100% {
-webkit-transform: translateY(0); -webkit-transform: translateY(0);
} }
} }
@keyframes fade-in-down { @-webkit-keyframes fade-in-down-subtle {
from { 0% {
opacity: 0; opacity: 0.8;
-moz-transform: translateY(-7px); -webkit-transform: translateY(-5px);
-ms-transform: translateY(-7px); }
-o-transform: translateY(-7px); 30% {
transform: translateY(-7px); opacity: 1;
}, }
to { 100% {
opacity: 0; -webkit-transform: translateY(0);
-moz-transform: translateY(0); }
-ms-transform: translateY(0); }
-o-transform: translateY(0); @keyframes fade-in-down-subtle {
transform: translateY(0); 0% {
opacity: 0.8;
-webkit-transform: translateY(-5px);
}
30% {
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes fade-in-up-subtle {
0% {
opacity: 0.3;
-webkit-transform: translateY(3px);
}
30% {
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
}
}
@keyframes fade-in-down-subtle {
0% {
opacity: 0.3;
-webkit-transform: translateY(3px);
}
30% {
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
} }
} }
/* ========================================================================== /* ==========================================================================
End of file. Media queries should be the last thing here. Do not add stuff End of file. Animations 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.
========================================================================== */ ========================================================================== */