lukas/PersonalWebsite
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

longer animation delay

Browse Source
This commit is contained in:
lukas-heiligenbrunner 2020-03-30 11:17:55 +02:00
parent cb33aaaea8
commit 2181234711
1 changed files with 26 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
css/home.css
View File

@ -5,25 +5,6 @@
* Copyright (c) 2020 Lukas Heiligenbrunner * Copyright (c) 2020 Lukas Heiligenbrunner
*/ */
/* The animation code */
@keyframes textfade {
from {
visibility: hidden;
position: relative;
top: -20px;
}
to {
visibility: visible;
position: relative;
top: 0;
}
}
#section1 {
background-color: #001631;
color: white;
padding-top: 200px;
}
.lightOpacity { .lightOpacity {
opacity: 0.6; opacity: 0.6;
@ -33,13 +14,19 @@
font-family: 'Helvetica Neue', fantasy; font-family: 'Helvetica Neue', fantasy;
} }
#section1 {
background-color: #001631;
color: white;
padding-top: 200px;
}
#preTitle { #preTitle {
font-size: 35px; font-size: 35px;
opacity: 0.8; opacity: 0.8;
color: #78ffd9; color: #78ffd9;
visibility: hidden; visibility: hidden;
animation: textfade 1s 600ms 1 forwards ; animation: textfade 1s 900ms 1 forwards ;
} }
#homepicture { #homepicture {
@ -59,27 +46,43 @@
color: #ced5f6; color: #ced5f6;
visibility: hidden; visibility: hidden;
animation: textfade 1s 300ms 1 forwards ; animation: textfade 1s 600ms 1 forwards ;
} }
#subTitleText { #subTitleText {
font-size: 50px; font-size: 50px;
color: #bec1d4; color: #bec1d4;
animation: textfade 1s 0ms 1 forwards ; visibility: hidden;
animation: textfade 1s 300ms 1 forwards ;
} }
#meaningFullSentence { #meaningFullSentence {
width: 40%; width: 40%;
color: #babccd; color: #babccd;
animation: textfade 1s 0ms 1 forwards ;
} }
/* todo maybe a bit weird?? */
#homepicture:hover { #homepicture:hover {
box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px; box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px;
transition: all 500ms; transition: all 500ms;
} }
/* The animation code */
@keyframes textfade {
from {
visibility: hidden;
position: relative;
top: -20px;
}
to {
visibility: visible;
position: relative;
top: 0;
}
}
/* height smaller than 720px */ /* height smaller than 720px */
@media screen and (max-height: 720px) { @media screen and (max-height: 720px) {
#homepicture { #homepicture {
@ -121,7 +124,3 @@
display: none; display: none;
} }
} }
@media only screen and (min-width: 600px) {
/* For tablets: */
}