chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

CSS Animations

Browse Source
This commit is contained in:
Chuck Dries
2017-04-13 10:08:00 -07:00
parent 03fcaba1d6
commit 713d332f03
5 changed files with 205 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
css/style.css
View File

@@ -1,3 +1,119 @@
@-webkit-keyframes fadeIn {
0% {
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
opacity: 0;
-moz-transform: translate(0, 10vh);
-webkit-transform: translate(0, 10vh);
-o-transform: translate(0, 10vh);
transform: translate(0, 10vh); }
20% {
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
opacity: 0;
-moz-transform: translate(0, 10vh);
-webkit-transform: translate(0, 10vh);
-o-transform: translate(0, 10vh);
transform: translate(0, 10vh); }
100% {
-moz-opacity: 1;
-webkit-opacity: 1;
-o-opacity: 1;
opacity: 1;
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
transform: none; } }
@-moz-keyframes fadeIn {
0% {
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
opacity: 0;
-moz-transform: translate(0, 10vh);
-webkit-transform: translate(0, 10vh);
-o-transform: translate(0, 10vh);
transform: translate(0, 10vh); }
20% {
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
opacity: 0;
-moz-transform: translate(0, 10vh);
-webkit-transform: translate(0, 10vh);
-o-transform: translate(0, 10vh);
transform: translate(0, 10vh); }
100% {
-moz-opacity: 1;
-webkit-opacity: 1;
-o-opacity: 1;
opacity: 1;
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
transform: none; } }
@-o-keyframes fadeIn {
0% {
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
opacity: 0;
-moz-transform: translate(0, 10vh);
-webkit-transform: translate(0, 10vh);
-o-transform: translate(0, 10vh);
transform: translate(0, 10vh); }
20% {
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
opacity: 0;
-moz-transform: translate(0, 10vh);
-webkit-transform: translate(0, 10vh);
-o-transform: translate(0, 10vh);
transform: translate(0, 10vh); }
100% {
-moz-opacity: 1;
-webkit-opacity: 1;
-o-opacity: 1;
opacity: 1;
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
transform: none; } }
@keyframes fadeIn {
0% {
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
opacity: 0;
-moz-transform: translate(0, 10vh);
-webkit-transform: translate(0, 10vh);
-o-transform: translate(0, 10vh);
transform: translate(0, 10vh); }
20% {
-moz-opacity: 0;
-webkit-opacity: 0;
-o-opacity: 0;
opacity: 0;
-moz-transform: translate(0, 10vh);
-webkit-transform: translate(0, 10vh);
-o-transform: translate(0, 10vh);
transform: translate(0, 10vh); }
100% {
-moz-opacity: 1;
-webkit-opacity: 1;
-o-opacity: 1;
opacity: 1;
-moz-transform: none;
-webkit-transform: none;
-o-transform: none;
transform: none; } }
.reset, body, .slide, .slide div .project .details h2, .slide div .project .details p, .slide div .project .details .award div p {
padding: 0;
margin: 0;
@@ -195,6 +311,12 @@ body {
font-style: italic;
font-weight: normal; }
#scrollprompt {
-moz-animation: 2s ease fadeIn;
-webkit-animation: 2s ease fadeIn;
-o-animation: 2s ease fadeIn;
animation: 2s ease fadeIn; }
@media (max-width: 800px) {
#mast {
padding-left: 1em; } }