diff --git a/src/index.css b/src/index.css index 736dc57..89428fe 100644 --- a/src/index.css +++ b/src/index.css @@ -18,6 +18,10 @@ --text-color: rgb(255, 255, 255); } +body { + animation: zoom-in 0.3s; +} + .header { margin: 10px auto; text-align: center; @@ -69,6 +73,7 @@ margin: 0; cursor: pointer; transition: transform 0.15s; + animation: zoom-in-large 0.3s; } .easter-egg-box { @@ -131,7 +136,6 @@ transition: background-color 0.25s, transform 0.25s; - animation: fade-in 0.3s; } .social-link-button:hover { diff --git a/src/keyframes.css b/src/keyframes.css index 2dcd5cd..23b2a69 100644 --- a/src/keyframes.css +++ b/src/keyframes.css @@ -1,6 +1,6 @@ @keyframes fade-in { 0% { - transform: scale(0.8, 0.8); + transform: scale(0.7, 0.7); opacity: 0; } @@ -10,6 +10,29 @@ } } +@keyframes zoom-in-large { + 0% { + transform: scale(1.5, 1.5); + opacity: 0; + } + + 100% { + transform: scale(1, 1); + opacity: 1; + } +} + +@keyframes zoom-in { + 0% { + transform: scale(1.12, 1.12); + opacity: 0; + } + 100% { + transform: scale(1, 1); + opacity: 1; + } +} + @keyframes fade-slide-left { 0% { transform: translateX(-30px);