diff --git a/css/animations.css b/css/animations.css index 5d31228..a3ae86c 100644 --- a/css/animations.css +++ b/css/animations.css @@ -36,6 +36,16 @@ 100% { -webkit-filter: contrast(100%); filter: contrast(100%); -webkit-filter: grayscale(0%); filter: grayscale(0%); } } +@-webkit-keyframes slide { + 0% { -webkit-transform: translateX(0); transform: translateX(0); } + 100% { -webkit-transform: translateX(-1200px); transform: translateX(-1200px); } +} + + @keyframes slide { + 0% { -webkit-transform: translateX(0); transform: translateX(0); } + 100% { -webkit-transform: translateX(-1200px); transform: translateX(-1200px); } + } + @-webkit-keyframes slime { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } diff --git a/css/styles.css b/css/styles.css index a5b68fc..49b5df7 100644 --- a/css/styles.css +++ b/css/styles.css @@ -24,12 +24,11 @@ main { } header { - animation: flicker 2s linear infinite both; display: flex; justify-content: center; } -header svg { width: 6rem; } +header img { width: 6rem; } #dock ul { display: flex; @@ -53,7 +52,7 @@ header svg { width: 6rem; } #dock a:hover { animation: slime 0.75s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; fill: var(--primary-link-hover-color); - margin-top: -0.25rem; + margin-top: -0.5rem; outline: none; } @@ -170,7 +169,7 @@ header svg { width: 6rem; } width: 40rem; } - header svg { width: 8rem; } + header img { width: 8rem; } #dock ul { column-gap: 0; @@ -180,3 +179,5 @@ header svg { width: 6rem; } #bookmarks { flex-direction: row; } } + +.slide { animation: slide 4250ms ease-in; } diff --git a/img/traichu-run.png b/img/traichu-run.png new file mode 100644 index 0000000..17b1c97 Binary files /dev/null and b/img/traichu-run.png differ diff --git a/index.html b/index.html index 1a7d76a..1c74bb2 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@
- _traichuMade with Pixels to Svg https://codepen.io/shshaw/pen/XbxvNj + traichu running