diff options
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | pages/repo/github/repos.html | 6 | ||||
| -rw-r--r-- | src/css/ghrepo.css | 4 | ||||
| -rw-r--r-- | src/css/style.css | 71 |
4 files changed, 79 insertions, 6 deletions
@@ -16,12 +16,12 @@ <!-- index page --> <div class="wrapper"> <section class="indexPage"> - <div class="window slowScroll"> + <div class="window slowScroll animate slideInTop animate--fast"> <div class="placeholder" id="infos"> <div class="text fastScroll"> <h2>Hello! This is</h2> <object class="br"></object> - <h1 class="title">littleblack111</h1> + <h1 class="title animate bounce animation--delay-p3s">littleblack111</h1> <object class="br"></object> <h2>welcome to my <br> website!</h2> </div> diff --git a/pages/repo/github/repos.html b/pages/repo/github/repos.html index 437204bf..79121d24 100644 --- a/pages/repo/github/repos.html +++ b/pages/repo/github/repos.html @@ -23,7 +23,7 @@ <main class="container"> <h1>All Of My Projects</h1> <section class="intro"> - <div class="user-info"></div> + <div class="user-info animate animation--fast slideInTop"></div> </section> <hr> @@ -31,8 +31,8 @@ <hr> <section class="repos"> - <input type="text" class="filter-repos hide" placeholder="Search Projects" /> - <ul class="repo-list"></ul> + <input type="text" class="filter-repos animate animate--slow slideInTop hide" placeholder="Search Projects" /> + <ul class="repo-list animate slideInTop"></ul> </section> </main> </body> diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css index 79100ffd..87a2da6a 100644 --- a/src/css/ghrepo.css +++ b/src/css/ghrepo.css @@ -104,6 +104,7 @@ a { a:hover { /* color: var(--text); */ background: rgba(0, 0, 0, 0.1); + transition: background 0.5s } .github-img { @@ -176,6 +177,7 @@ input { .filter-repos:hover { background: rgba(10, 10, 15, 0.5); + transition: background 0.5s } .repos { @@ -234,6 +236,7 @@ h3 { .repo-list li:hover { /* box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); */ background: rgba(0, 0, 0, 0.5); + transition: background 0.5s } .link-btn { @@ -250,6 +253,7 @@ h3 { background: rgba(22, 136, 240, 0.5); border: 2px solid var(--text); transform: scale(1.1); + transition: background 0.5s, transform 0.3s, border 0.5s; } .repo-list p { diff --git a/src/css/style.css b/src/css/style.css index a313b77e..e18f2a68 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -34,6 +34,74 @@ body { left: 0; } +/* animation ============================================== */ + +@keyframes slideInTop { + from { + transform: translateY(-300px); + } + to { + transform: translateY(0); + } +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0px); + } + 40% { + transform: translateY(30px); + } + 80% { + transform: translateY(-15px); + } +} +/* animation: name duration timing-function delay iteration-count direction fill-mode; */ + + +/* animate class */ +.animate { + animation-duration: 0.5s; + animation-fill-mode: both; +} + +.animate.animate--infinite { + animation-iteration-count: infinite; +} + +.animate.animation--delay-1s { + animation-delay: 1s; +} +.animate.animation--delay-p5s { + animation-delay: 0.5s; +} +.animate.animation--delay-p3s { + animation-delay: 0.3s; +} + +.animate.animation--fast { + animation-duration: 0.3s; +} + +.animate.animation--slow { + animation-duration: 1s; +} + +.animate.slideInTop { + animation-name: slideInTop; + animation-timing-function: ease-in; +} + +.animate.bounce { + animation-name: bounce; +} + +/* transition */ +*:hover { + transition: all 0.3s +} + + /* topbar styles ========================================== */ header { @@ -84,7 +152,8 @@ header { } .navBar a:hover { - background: rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.2); + transition: background 1s } .navBar a.active::after { |