base

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);
+    }
 }

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.