diff --git a/Natours/starter/css/style.css b/Natours/starter/css/style.css index fb0491f..16faf4a 100644 --- a/Natours/starter/css/style.css +++ b/Natours/starter/css/style.css @@ -42,11 +42,23 @@ body { height: 35px; } +/* +.logo:hover{ + animation: moveInRight 1s ease-out; +} +*/ + .text-box{ position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); + + /* + * Limpiar animaciones para evitar temblores + * No se sabe realmente por qué funciona o de dónde viene el error, pero lo hace + */ + backface-visibility: hidden; } .heading-primary { @@ -59,6 +71,15 @@ body { font-size: 60px; font-weight: 400; letter-spacing: 35px; + + animation-name: moveInLeft; + animation-duration: 1.2s; + animation-timing-function: ease-out; + + /* + animation-delay: 3s; + animation-count: 3; + */ } .heading-primary-sub { @@ -66,4 +87,41 @@ body { font-size: 22px; font-weight: 700; letter-spacing: 16px; + /* + animation-name: moveInRight; + animation-duration: 1.2s; + */ + animation: moveInRight 1.2s ease-out; } + +@keyframes moveInLeft{ + 0%{ + opacity: 0; + transform: translateX(-100px); + } + + 80%{ + transform: translateX(20px); + } + + 100%{ + opacity: 1; + transform: translate(0); + } +} + +@keyframes moveInRight{ + 0%{ + opacity: 0; + transform: translateX(100px); + } + + 80%{ + transform: translateX(-20px); + } + + 100%{ + opacity: 1; + transform: translate(0); + } +} \ No newline at end of file diff --git a/README.md b/README.md index 0ee4944..e0b1b5f 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,9 @@ # Anotaciones - Una imagen es un 'inline-element' por lo que es recomendable insertarla en un div para manejarla. - Un 'block' ocupa todo el espacio que tiene disponible y crea saltos de línea antes y después. + +## Animaciones +Hay dos tipos de animaciones: +- Con la propiedad 'transition' +- Con keyframes + - Lo ideal es solo animar con opacity y transform, porque los navegadores están optimizados para ellas dos solo.