diff --git a/CSS/style.css b/CSS/style.css index fd39e8a..c337d13 100644 --- a/CSS/style.css +++ b/CSS/style.css @@ -72,11 +72,16 @@ body * { left: 0; top: 50%; transform: translateY(-50%); + animation: slide-out 0.3s; + transition: outline 0.2s; +} + +#switch button:hover { + outline: 8px solid var(--highlight-color); } .light #switch button { - right: 0; - left: initial; + animation: slide-in 0.4s forwards; /*forwards mantém as propriedades de to{...} em keyframes*/ } #switch span { @@ -98,6 +103,7 @@ body * { #profile img { width: 112px; + transition: opacity 0.1s ease-in-out; transition: all 0.5s; } @@ -193,3 +199,23 @@ footer a:hover { --bg-url: url(../Assets/bg-desktop-light.jpg); } } + +/*animation*/ + +@keyframes slide-in { + from { + left: 0; + } + to { + left: 50%; + } +} + +@keyframes slide-out { + from { + left: 50%; + } + to { + left: 0; + } +} diff --git a/JS/script.js b/JS/script.js index f144031..481edbe 100644 --- a/JS/script.js +++ b/JS/script.js @@ -11,21 +11,24 @@ function toggleMode() { html.classList.toggle("light"); - if (html.classList.contains("light")) { - img.setAttribute("src", "../Assets/avatar-light.png"); - } else { - img.setAttribute("src", "../Assets/avatar.png"); - } + img.style.opacity = "0"; - if (html.classList.contains("light")) { - img.setAttribute( - "alt", - "Foto de perfil de André Melchior do tema claro" - ); - } else { - img.setAttribute( - "alt", - "Foto de perfil de André Melchior do tema escuro" - ); - } + setTimeout(() => { + if (html.classList.contains("light")) { + img.setAttribute("src", "../Assets/avatar-light.png"); + img.setAttribute( + "alt", + "Foto de perfil de André Melchior do tema claro" + ); + } else { + img.setAttribute("src", "../Assets/avatar.png"); + img.setAttribute( + "alt", + "Foto de perfil de André Melchior do tema escuro" + ); + } + + // Restaura a opacidade para 1 + img.style.opacity = "1"; + }, 150); }