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

added animations to home page

Browse Source
This commit is contained in:
lukas-heiligenbrunner 2020-03-27 15:34:11 +01:00
parent e9c6b09688
commit ea1863255c
1 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/home.css
View File

@ -5,6 +5,20 @@
* 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 { #section1 {
background-color: #001631; background-color: #001631;
color: white; color: white;
@ -23,6 +37,9 @@
font-size: 35px; font-size: 35px;
opacity: 0.8; opacity: 0.8;
color: #78ffd9; color: #78ffd9;
visibility: hidden;
animation: textfade 1s 600ms 1 forwards ;
} }
#homepicture { #homepicture {
@ -40,11 +57,16 @@
#titleText { #titleText {
font-size: 80px; font-size: 80px;
color: #ced5f6; color: #ced5f6;
visibility: hidden;
animation: textfade 1s 300ms 1 forwards ;
} }
#subTitleText { #subTitleText {
font-size: 50px; font-size: 50px;
color: #bec1d4; color: #bec1d4;
animation: textfade 1s 0ms 1 forwards ;
} }
#meaningFullSentence { #meaningFullSentence {