Cómo empezar con animaciones de CSS

1. ¡Te damos la bienvenida a la clase!: Con tantos sitios web impresionantes y algunos no tan impresionantes también, a menudo puede ser difícil hacer que su sitio web se destaque entre la multitud. Una forma de hacerlo es agregar algunas animaciones a tu texto, como el título de una página o cualquier otro texto de título. No queremos exagerar las cosas y animar todo pero algún texto llamativo realmente puede llamar la atención del usuario. Aquí, puedes ver los ejemplos de lo que vamos a construir en esta clase usando HTML y CSS. Juntos construiremos 10 ejemplos, que luego podrás aplicar fácilmente a proyectos reales. Con todos estos textos en movimiento y animaciones de aspecto complejo, piensan que estos son realmente complejos de construir. Bueno, en realidad, todo lo que ves aquí es bastante sencillo mayoría solo necesita unas pocas líneas de CSS para crear la animación. De hecho, a menudo escribiremos más CSS para que nuestro texto vea como queremos y en realidad lo usaremos para la animación en sí. Aprenderás todas las técnicas útiles como fotogramas clave, modos de factura, la duración de las animaciones, retardos, efecto de flexibilización, cálculo de valores con variables, combinación de animaciones, polígonos y rutas de clip, y también algunos CSS generales. Esta clase está diseñada para ser amigable para principiantes aunque alguna exposición a HTML y CSS será una verdadera ventaja ya que se asumirá que conoces los conceptos básicos. No hace falta que hayas hecho ningún trabajo de animación en el pasado. Además, todo lo que creamos se creará completamente de forma gratuita dentro del navegador. No necesitas ninguna compra o software adicional. Podemos ponernos en marcha de inmediato dentro del navegador. Con esto, pasemos ahora a la primera animación y veré en el próximo video. 2. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no tener el hábito de seguirlo solo por el simple hecho de marcar otra conferencia. Tómese el tiempo para procesar cada lección. Revisa el código que escribes y piensa en cómo podrías abordar estas soluciones tú mismo. Con esto en mente, esta clase está basada en proyectos y esto te da la oportunidad de hacer algo realmente personal y único. No necesitas perderte demasiado y desviarte de la clase. Incluso puedes dar un paso atrás después de haber terminado la clase, y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido fuera de la clase. También recuerda compartir tu proyecto hasta aquí en Skillshare, no solo lo revisaré, sino que también inspirará a otros estudiantes también. Para obtener más información sobre el proyecto de clase, dirígete a la pestaña Proyecto y Recursos, donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente espero ver lo que creas y subas aquí en Skillshare. 3. Animación 1: animaciones básicas y fotogramas clave: Como se menciona en el video de introducción, no se requieren software o compras adicionales para completar esta clase. Todo se completará dentro del navegador utilizando un sitio web llamado codepen.io. Echemos un vistazo rápido a este sitio web y veamos cómo configuramos las cosas. Para empezar dirígete a codepen.io. Este va a ser el sitio web que vamos a utilizar para crear todas estas animaciones. Si quieres y tienes un editor de texto como Visual Studio Code ya configurado, libre de usar eso. Esoestá completamente bien. Pero para mí voy a crear una nueva pluma para cada uno de estos ejemplos de código. Una vez que hayas creado una cuenta y hayas iniciado sesión en Codepen, verás una pantalla que se parece a esta. A la izquierda, tenemos una barra lateral donde podemos crear un nuevo bolígrafo. Haga clic en este bolígrafo y esto debería crear un nuevo sitio vacío fotos. Dentro del Codepen, vamos a tener una sección HTML, una sección de hoja de estilo, y también una sección de JavaScript también. Todos estos serán enlazados y combinados para que podamos escribir nuestro código y ver esta vista previa en la ventana de abajo. Es muy fácil ponerse en marcha y crear fragmentos de código simples y ver los resultados muy rápido. En los próximos ejemplos, vamos a echar un vistazo a algunas variantes diferentes de animaciones y cómo podemos trabajar con diferentes tipos de texto. Para esto, necesitamos un texto de logotipo increíble para trabajar. Para este ejemplo en particular, voy a aislar cada una de las letras del texto para que sea un solo elemento y veremos por qué una vez que nos pongamos en marcha. En primer lugar, crear un div, que va a ser un wrapper para todo nuestro texto. Agrega una clase igual a title_container y usamos esto para agregar un poco de estilo muy pronto. Para estos próximos ejemplos, voy a usar un nombre comercial llamado la fábrica de magdalenas. Para algunos de los ejemplos posteriores, podemos escribirlo como una cadena completa de texto, así como esto. Pero para esta animación en particular, vamos a trabajar con cada uno de estos personajes individualmente. Esto significa que necesitamos aislar cada uno de estos agregando cada carácter a sus propios elementos HTML. Para ello, podemos crear algo como un span con elementos span. Ahora, crearemos nuestros textos con un carácter a la vez usando Control o Comando C para copiar. Pegar con Control o Comando V. Entonces seguiremos haciendo esto hasta que deletreemos la palabra la fábrica de magdalenas. También puedes cambiar esto para que sea un nombre diferente si quieres. Realmente no hace ninguna diferencia. Aunque tu nombre sea más largo o más corto, no hace diferencia, la animación. T-O-R-Y. Ahí vamos. Este es nuestro texto todo deletreado. También para la última palabra factory, solo para agregar un estilo diferente. En efecto, voy a segregar esto agregando una clase. Establecer el nombre de la clase igual a factory y luego también podemos copiar esto y pegarlo en cada uno de los siguientes elementos. Vemos el texto de la fábrica de magdalenas. De hecho, tenemos que asegurarnos de deletrear esto correctamente. Ahí vamos. Esos están todos previsualizados abajo en la parte inferior. Para comenzar, en el CSS, podemos agregar algunos estilos y maquetación y agregaremos algunos estilos generales a la sección del cuerpo. En primer lugar, la altura. Esto es puramente para presentación. Estableceremos esto para que sea el 100 por ciento de la altura de la ventana gráfica. Haremos uso del flexbox configurando el tipo de visualización para que sea igual a flex. Esto nos permitirá posicionar nuestro texto en el centro de esta ventana. Esto lo haremos configurando justificar que el contenido esté en el centro y ellos deben empujar el texto hacia el centro, horizontalmente. Alinee los elementos en el centro. Esto nos dará la alineación vertical. Ambas opciones son posibles porque el tipo de visualización predeterminado es estar en una fila. Esto significa que el contenido es de izquierda a derecha a través de la página, en lugar de en forma de columna de arriba a abajo. Después de nuestro posicionamiento, agregaremos algunas fuentes. Establezca la familia de fuentes para que sea igual a Georgia. Un respaldo de serif. También puedes cambiar esto si quieres ser cualquier fuente diferente o estilo diferente en el tamaño de fuente. Haz esto un poco más grande de 62 píxeles. Esto lo hace un poco más legible dentro del navegador. Recuerda que cada uno de estos caracteres de nuestra palabra está rodeado por este elemento span. Vamos a agarrar este elemento span. Entonces podemos ponernos a trabajar agregando un poco de estilo. El color del gris pizarra. Hasta ahora todo el estilo que estamos haciendo es solo para presentación. Actualmente no tiene ningún efecto en la animación que vamos a crear en un momento. Entonces solo hazlo un poco diferente de la sección de fábrica. Tomaremos nuestra clase de fábrica y también cambiaremos el color para esta. Como esta es una clase, usamos el punto. Coge el texto de fábrica. Entonces podemos establecer el color dentro de aquí. Voy a ir por un valor de hexágono, que es EEC 549 punto y coma. Con todo este estilo básico fuera del camino, ahora podemos ponernos a trabajar en agregar algunas animaciones básicas. Para crear una animación en CSS, una forma realmente sencilla de hacerlo es establecer el estado inicial y final de la animación. Entre estos dos estados, el principio y el final, podemos cambiar cualquiera de las propiedades CSS que desee. Por ejemplo, podemos establecer el color inicial de nuestro texto para que sea gris y luego podemos establecer el color final para que sea un color diferente. Podemos cambiar el tamaño de la fuente. Podemos jugar con el espaciado y cualquier otra propiedad que desee. Para establecer estos cambios o esta transición, lo que tenemos que hacer es hacer uso de fotogramas clave. Esta regla de fotogramas clave tiene un conjunto de llaves como esta y por dentro, establecemos el estado inicial y final de nuestra animación. Podemos hacer esto estableciendo esto en cero o cero por ciento. Entonces podemos agregar nuestros estilos dentro de las llaves rizadas. Después después, el estado que queremos que aparezca cuando termine la animación al 100 por ciento. Como solo estamos iniciando las cosas con un ejemplo sencillo, solo vamos a usar estos dos porcentajes, pero también puedes agregar cualquier otro valor dentro del cual quieras. Esto creará estados más intermedios y animaciones complejas. Además de simplemente agregar nuestros fotogramas clave, también necesitamos darle un nombre a estas reglas de fotogramas clave. Llamemos a esta animación. Entonces estableceremos el estado de cero por ciento, que es el comienzo mismo de nuestra animación. Para hacer que cada una de estas letras se mueva, lo que vamos a hacer es agregar algún margen, que es cierto espaciado fuera de los elementos en el lado izquierdo. Vamos a agregar algún margen a la izquierda de 10 píxeles. Entonces, una vez que la animación haya terminado, reduciremos esto a la baja para que el margen sea de solo cinco píxeles. Lo que esto va a hacer por cada uno de nuestros elementos individuales, que son los elementos span, vamos a agregar esta animación que comenzará por agregar más espacio a la izquierda y luego reducirá esto abajo a menos espaciado que efectivamente moverá cada una de estas letras una a la vez. Para vincular esto a nuestros elementos span, lo que podemos hacer es saltar a la sección span. Colocando el nombre de la animación, que es igual a este nombre que le dimos a nuestros fotogramas clave. Si guarda esto, actualmente no vemos ningún cambio dentro de esta vista previa. El motivo es porque aunque hemos establecido el estado inicial y final, también necesitamos declarar qué tan rápido es esta animación el proceso. Cuántos segundos tiene la duración desde el principio hasta el final de los fotogramas clave. Para ello, justo debajo del nombre de la animación, podemos agregar la duración de la animación. Para ello, quiero usar tres segundos. Podemos usar la S por segundos o también podemos usar MS por milisegundos. Para milisegundos, 1,000 es igual a un segundo entero. Sólo voy a mantener esto como tres segundos. Ahora bien, si presionamos el botón guardar, o también refrescar, notarás dos cosas sobre esta animación. Lo primero es que en realidad está funcionando. Va desde un margen izquierdo de 10 píxeles y luego termina a un valor menor de cinco píxeles, haciendo que cada una de estas letras se mueva. Bueno, si también miras de cerca, vamos a refrescarnos. Una vez que llegamos al final de la animación, vemos este salto justo al final. Lo que esto está haciendo es que la animación está comenzando, está terminando y luego vuelve al estado original, que era antes de que se procesara la animación. Esto está completamente bien si esto es lo que quieres hacer, si quieres restablecerlo de nuevo al formato original. Alternativamente, a menudo es posible que desee dejar el estado final exactamente como terminó la animación. Bueno, para ello, lo que podemos hacer es usar una propiedad llamada modo película de animación y establecer este valor para que sea igual a forward. Lo que esto hará es que esto asegurará que al final de nuestra animación, el modo forward significará que se mantenga en el estado final, que se estableció en nuestros fotogramas clave. Ahora bien, si guardamos y recargamos la página, podemos ver que nuestra animación entra vigor y permanece en el estado final de nuestros fotogramas clave. Sólo para terminar esto, voy a establecer esto igual al logotipo de la fábrica de cupcakes Número 1. Este es ahora nuestro primer logotipo o nuestra primera animación ahora completada. Te veré en la segunda. 4. Animación 2: cómo combinar animaciones: Para nuestra segunda animación, vamos a combinar dos animaciones separadas. Lo que vamos a hacer para comenzar es que trabajaremos con el cupcake, voy a volver a usar el espacio y las propiedades para comenzar esto más amplio. Comenzará la animación y luego estos cerrarán juntos y luego después, una vez que todo esto esté terminado, se desvanecerá en la palabra de fábrica. Para comenzar esto, crearemos un nuevo bolígrafo haciendo clic en el botón de la horquilla hacia abajo en la parte inferior. Esto hará una copia de nuestro proyecto existente por lo que nos da un punto de partida con todos los estilos HTML y base que necesitamos. Voy a cambiar esto para que sea Logo número dos. Entonces, como se mencionó, mantendremos todo este texto, mantendremos el cuerpo y todas estas fuentes base, pero crearemos nuestros nuevos fotogramas clave abajo en la parte inferior. Para que quede claro, qué es exactamente lo que estamos haciendo, cambiaremos esto para que sean los fotogramas clave llamados espaciado y esto va a volver a ajustar el margen. Si bien esto se aplicará a todos nuestros elementos span, nos vamos a desvanecer en la fábrica, por lo que esto no es visible. Trabajaremos con el texto de fábrica justo después, así que comenzaremos agregando algo de margen completo en lugar de solo a la izquierda. Ahora para esto, coloquemos margen cero en la parte superior e inferior, voy a ir por 14 pixeles a la izquierda y a la derecha. Este será el estado inicial en cero por ciento y también voy a sumar esto al 25 por ciento. Entonces, qué hará esto, esto asegurará que nuestro margen permanezca igual para el primer trimestre de la animación y luego después, al final, se mezclará para ser un valor de margen diferente. Cambiemos el margen, mantenemos cero en la parte superior e inferior y lo hacemos cuatro píxeles a la izquierda y a la derecha, probemos esto y veamos cómo se ve esto. Si subimos al lapso. Bueno, voy a hacer es copiar este margen en su lugar esto como el estado inicial de nuestra animación para que en cuanto esto cargue, nuestro span o nuestras letras tendrán este margen a la izquierda y a la derecha. Esto permanecerá durante el primer trimestre de la animación y luego reduciremos el espacio entre cada uno a cuatro píxeles, así que ya que cambiamos el nombre de la animación de animación para ser espaciado, Cambiemos esto y también podemos crear una taquigrafía para todo esto también, lugar de agregar todas esas propiedades de animación en dos líneas separadas, podemos colocar todas estas enuna propiedad de animación. Tenemos el nombre de nuestra animación, y en lugar de tener el tiempo y el modo de película como propiedades separadas, podemos agregar todas estas en la misma línea. Esto significa que podemos eliminar nuestra duración y nuestro modo de llenado. Todo debería seguir funcionando como antes. Por lo que ahora guarda y actualiza, comenzamos con 14 píxeles de margen a la izquierda y a la derecha. Esto permanece para el primer cuarto de la animación y luego al final, esto se reduce a ser de cuatro píxeles. Dado que establecemos el modo de relleno para que sea hacia adelante, este es también el estado final en lugar de volver al valor original. Vamos a ver esto una vez más. 14 pixeles abajo a 4, y esto permanece en su lugar. Al inicio de este video, mencioné que vamos a combinar dos animaciones separadas. La animación que tenemos, solo queremos aplicarla a las palabras, al cupcake y luego nos desvaneceremos en la fábrica de palabras una vez que esto haya terminado. Para esto, necesitamos crear una regla de fotogramas clave separada abajo en la parte inferior en los fotogramas clave. A esto lo llamaremos el retraso. Entonces esto va a funcionar con la propiedad de opacidad CSS y comenzaremos en 0 por ciento y también 30 por ciento. La razón por la que nos fijamos en dos valores diferentes aquí es porque de repente el valor de opacidad para ser igual a 0. Lo que haremos es agregarlo a cada una de las cartas de fábrica. Esto establecerá la opacidad, lo que significa que es completamente transparente, por lo que no verá ninguna de las palabras para el primer 30 por ciento de nuestros fotogramas clave. Entonces al final, 100 por ciento, haremos que el valor de opacidad sea igual a 1, que es completamente opaco, es decir, nuestro texto vuelve a su valor regular. Vamos a destilar a clase olfativa justo arriba, justo debajo del color. Estableceremos la animación, nuevamente usando la taquigrafía que podemos colocar en el nombre de la animación de delay y ejecutar esta en cinco segundos. Para que podamos volver a ver, si refrescamos el primer 30 por ciento de la animación, la opacidad se pone a cero y luego hacia el final, esto comenzará a desvanecerse. También hacer que esto se vea un poco mejor, voy a reducir el espacio entre cada una de estas letras y también hacerlo itálico. Así que vuelve a la clase de fábrica. Colóquelo en la propiedad font-style de itálico, probemos esta y también reduzcamos el margen, así que 0 en la parte superior e inferior y cinco píxeles a la izquierda y a la derecha. Vamos un poco menos, solo cambiaremos esto a dos píxeles. Ahí vamos y así es como podemos combinar dos o más animaciones y también podemos fusionar en todas estas propiedades CSS en una taquigrafía de animación. 5. Animación 3: texto para el cálculo y el sesion: Bienvenidos de nuevo a nuestra tercera demostración. Vamos a seguir con este mismo HTML para este vínculo y mucho del mismo estilo también así que obtenemos un comienzo rápido duplicando nuestro proyecto. Entonces tenedor, nuestro segundo logo. Esto duplicará nuestro contenido original. Entonces el HTML permanecerá exactamente igual para que podamos controlar todas las letras individuales, cambiaremos esto más adelante. El cuerpo puede permanecer igual, el lapso, podemos quitar el margen, y también los duplicados no deberíamos tener esto. Luego, hacia abajo, nos pondremos a trabajar creando nuestros fotogramas clave. Para este, lo que vamos a hacer es hacer que todas las letras más extensamente extendidas o espaciadas con la propiedad letter-spaced. Así que vamos a empezar muy amplia, carta para prestar todo dibujar de nuevo en la posición original. Entonces también, al final, haremos el texto en cursiva estableciendo una transformación. Para que podamos eliminar uno de estos fotogramas clave. Necesitarás un conjunto de fotogramas clave para este, y llamaremos a esto la animación ya que todavía hay varias cosas. Nuevamente, al cero por ciento. Entonces, como se mencionó, usaremos la propiedad de espaciado entre letras para esta. Estableceremos esto en 10 píxeles al principio, también estableceremos un estado intermedio que es del 50 por ciento, donde el espaciado entre letras comenzará a hacerse más amplio. Entonces comenzaremos con 10 píxeles de ancho inicialmente, luego a mitad de camino a través de la animación hará que esto sea mucho más amplio. Vamos por 100 pixeles. Entonces, al final, estableceremos nuestro espaciado entre letras en 20 píxeles. Pero esto es un poco más amplio que el estado inicial original. Vamos a guardar esto. Podemos colocar en nuestra animación en nuestro lapso, colocando el nombre de la animación. Veamos cómo se ve esto. Se puede ver que va más ancho y luego regresa al centro en tres segundos. Sólo refresquemos y veamos esto una vez más. Entonces aquí, a cero por ciento, establecemos el espaciado entre letras 10 píxeles y terminamos en 20 píxeles de ancho. Así que también podemos además establecer el estado inicial y el final, también podemos facilitar o construir en estas animaciones, podemos facilitarlas lo que poco a poco trae en nuestra primera cita, y nosotros también puede facilitarlas para finalizar o terminar gradualmente nuestra animación. Entonces, para hacer esto dentro de nuestra animación, estableceremos facilidad. Esto construirá en nuestra animación un poco más suavemente, pero si quieres que esto sea sencillo y también fuera, podemos seleccionar ease-in-out, refrescar, y todo se ve bien en este caso. Una cosa que también tenemos que hacer con el texto de fábrica es eliminar la animación no utilizada de anteriormente. También podemos eliminar el estilo de fuente de cursiva ya que aquí vamos a omitir todos los textos de la pantalla. Una cosa que también podrías notar, cuando estamos trabajando con este espaciado de letras o margen, empujamos el texto para que sea realmente ancho y salgamos de la pantalla. Solo guardemos y refresquemos. A veces verás que el texto se envuelve en líneas adicionales, obviamente este no es el aspecto que vamos a buscar. Para solucionarlo, podemos trabajar con el contenedor de título. Vamos a agarrar esto, que es el contenedor para todo este texto justo aquí. Este es el cluster, entonces usamos el punto. Lo que vamos a hacer dentro de aquí es simplemente establecer el tipo de pantalla para que sea igual a flex. Vamosa probar esto. Ahora puedes ver que el texto empuja fuera la página sin envolverlo en la siguiente línea. La razón por la que hace esto es porque por defecto, el flex-box intentaremos encajar en una sola línea a menos que agreguemos una propiedad adicional como flex-wrap. Flex-wrap restringirá que esto sea el ancho del contenedor de la página y permitirá que se envuelva en múltiples líneas. Obviamente, no queremos esto, así que podemos eliminar esto y mantener la configuración predeterminada. Entonces lo último que vamos a hacer es volver a bajar a nuestros fotogramas clave y establecer el sesgo en nuestro texto. Inicialmente, vamos a establecer la transformación para que sea un valor de cero al 50 por ciento del camino a través de nuestra animación. La transformación, haremos uso de la propiedad skewx y estableceremos esto en un valor inicial de cero. Esto significará que a mitad de nuestra animación, no tenemos ningún efecto de la transformación. Pero, una vez que lleguemos al final, copiaremos esto y pegaremos esto al 100 por ciento y pondremos la velocidad a 20 grados negativos, esto ahora va a causar un desplazamiento al final de nuestra animación, queya veremos. Luego se inclina sobre todos los textos 20 grados y nos da este efecto cursiva. También puedes jugar con esto y hacer algunas cosas realmente locas. Entonces, por ejemplo, si quisiéramos al inicio de la animación, todo este texto fuera empujado fuera de los bordes de la pantalla. Entonces para entrar al centro, podríamos hacer algo como agregar algún margen a la izquierda, que ya hemos hecho antes, 100vw, que es el ancho de la pantalla. Esto comenzará entonces muy amplio y luego todos los textos entrarán en el centro. Simplemente eliminemos esto y mantengamos nuestra animación original. Genial. Sólo para terminar este off saltará hasta arriba, y le pondremos el nombre del logotipo número 3. Guarda, abre y te veré en la siguiente. 6. Animación 4: retrasos y traducciones: Pasando ahora a la animación Número 4. Como siempre, dará clic en el botón “Tenedor” para hacer una copia de nuestro logotipo Número 3. Cambiaremos esto para ser Número 4 como título, y podemos reutilizar mucho del mismo código de ejemplos anteriores. Pero lo que vamos a hacer es dividir las palabras, la magdalena y la fábrica. Haremos que la fábrica se deslice por la izquierda y hacia la derecha y luego una vez completada después de un retraso de tiempo, luego nos desvaneceremos en las palabras del cupcake. Ya tenemos esta clase, una fábrica para trabajar con esta palabra. Lo que también haremos es subir a las palabras, el cupcake y agregar una clase igual a cupcake. Esto nos permitirá trabajar con esta sección en particular y si copiamos esta y la pegamos en cada una de las siguientes letras. Ahora tenemos dos secciones claras y en lugar de trabajar con el span, reemplazaría esto con la clase de cupcake. El color está bien, pero lo que vamos a hacer con palabras del cupcake es desvanecerse esto al final. Comenzaremos con un valor de opacidad de cero. Esto significa que no vemos estas dos palabras inicialmente, pero las desvaneceremos con nuestra animación. Ahora bajemos al fondo. Configuraremos nuestros fotogramas clave. Para ello vamos a trabajar con dos separados. Elimina todos los contenidos del interior de nuestra animación y llamaremos a esto deslizable a la derecha. Esta va a aplicar a las palabras factory. Va a comenzar de nuevo por la izquierda y luego trasladarse sobre el eje x a la oposición. En lugar de configurar los porcentajes dentro de los fotogramas clave, si solo quieres pasar de un estado a otro, solo podemos decir a. Esto comenzará con nuestras propiedades CSS iniciales que tenemos arriba y luego animaremos a las propiedades que agregamos dentro de aquí. Podemos simplemente duplicar esto, nuestra sección fade y lo llamaremos fade. Este también puede mantener el to dentro. Para el fade, vamos a agregar esto a las palabras el cupcake. Recuerda, actualmente hemos establecido la opacidad para que sea igual a cero. Empezaremos con esto como cero y luego si copiamos esto y pegamos esto en nuestro fade, cambia esto para que sea uno y esto será al final de nuestra animación. Efectivamente, lo que tenemos es esta opacidad al cero por ciento y luego esta al final. Entoncespodemos configurar esto. Podemos cambiar la clase de cupcake, tener la animación de fade. Haz que esto funcione a lo largo de 1.5 segundos. Guarde esto y veremos que nuestra animación se desvanece ahora. Tenemos un problema familiar, que es al final, volvemos al estado original de la opacidad para ser cero. Podemos retener el estado final de la animación configurando esto para que sea hacia adelante le da intento. Esto ahora permanece en su lugar. Ahora podemos comenzar a trabajar con el texto de fábrica, que va a comenzar a la izquierda y luego deslizarse hacia la derecha. Ya tenemos esta configuración de clase y el color. Dentro de aquí, podemos configurar el estado inicial de nuestra animación. Haremos uso de la propiedad transform donde traduciremos cruzando el valor del eje x de 150 píxeles negativos. Si guardamos esto, podemos ver que esto se empuja hacia la izquierda, 150 píxeles y este va a ser el estado inicial de nuestra animación. Podemos copiar esto y terminar esto de nuevo en el valor de cero. Obviamente, necesitamos agregar esta animación deslizable a la derecha a nuestra clase de fábrica. Coloca esto en la animación que llamamos deslizable a la derecha. Lo haremos en dos segundos. También mantenemos el estado final con delanteros. Todo esto funciona bien, pero una cosa que notarás es que tenemos este solapamiento de la fábrica repasando las palabras el cupcake. Una de las formas en que podemos arreglar esto es agregar un retardo de animación. Solo nos desvanecemos después de haber deslizado el texto de fábrica hacia la derecha. La forma de hacerlo es si entramos en nuestra sección de cupcakes, y tenemos dos formas de hacerlo. Podríamos agregar un retardo de animación y establecer esto para que sea igual a cualquier número de segundos que desee. Esto agregará un retraso de 1.5 segundos a nuestro fade in. O también podríamos añadir esto a la taquigrafía. Coloquemos esto justo antes de nuestro nombre de animación. Vamos a comentar esto. Esto aún nos da el retraso de tiempo requerido. 7. Animación 5: texto deslizante: Este próximo va a ser un poco de juego sobre lo que ya tenemos. Vamos a trabajar con el grupo de fábrica y luego empezaremos esto de nuevo en la parte superior derecha y luego lo moveremos diagonalmente hacia abajo para que quede debajo de las palabras, Cupcake. Esto se sentará abajo. Entonces después de esto, después de un pequeño retraso, traeremos las palabras, TheCupcake, cambiando la opacidad. Bajaremos al botón Tenedor y duplicaremos nuestro proyecto. Haz una copia de esto y luego lo cambiaremos para que sea el logotipo número 5. Para ello vamos agregar un cierto margen inicialmente a las palabras, Fábrica, que la va a mover de algún lugar arriba en la parte superior derecha y luego llevar esto diagonalmente hacia abajo en su lugar. Para ello estaremos haciendo uso de algún margen. Ahora, actualmente estamos trabajando con cada una de estas clases de fábrica. Si tuviéramos que añadir algún margen a cada uno de estos se aplicaría individualmente a cada letra única. En cambio, para mover esto como un grupo completo lo que voy a hacer es cortar cada una de estas clases de fábrica, recortar todos los vanos, crear una nueva sección div. Este tendrá la clase de factory_wrapper dentro de aquí, pega en nuestro contenido. Esto ahora nos está dando un envoltorio para trabajar con toda esta palabra para que podamos mantener nuestros estilos base para el cuerpo, el contenedor y también el cupcake. Todo esto está bien. Podemos sacar esta sección comentada y luego se pone a trabajar con la fábrica así no necesitamos transformarnos. Vamos a trabajar con margen para éste. Podemos mover la animación ya que vamos a aplicar la animación a nuestro envoltorio de fábrica. Hagámoslo. Seleccione nuestra clase y luego agregue una propiedad de animación. Esta propiedad de animación, podemos hacer uso del nombre de fotogramas clave existentes de la diapositiva a la derecha durante la duración de dos segundos. Dejaremos esto en el estado delantero. Recuerda que los delanteros mantendrán los estados finales de nuestra animación. Abajo a nuestra animación en nuestros fotogramas clave de diapositiva derecha, dentro de aquí, además de agregar las dos propiedades, también podríamos agregar el estado inicial con las palabras, de. Podemos agregar esto dentro de estos tirantes rizados. Para esto, empujaremos nuestro texto de fábrica arriba a la derecha, en algún lugar alrededor de esta área. Para ello, agrega algo de margen en el lado izquierdo. Vamos a empujar esto a través de la página por 300 píxeles. Entonces después de esto, al final, cambiaremos esto para que sea margen superior de 50 píxeles. Veamos qué efecto tendrá esto. Como puede ver, al inicio de la transformación este margen izquierdo se aplicará al lado izquierdo, empujando estos textos hacia la derecha y luego gradualmente al final esto agregará algunos margen en la parte superior, que luego empuja este texto por debajo de las palabras del cupcake. Solo guardemos esto y refresquemos para que podamos verlo una vez más. Bien, esto está funcionando bien pero igual que un toque final final, lo que quiero hacer es mover las palabras, Factory, para estar más a la izquierda. Insertaremos esto justo debajo de las palabras, pastel. Para ello, ir al estado final de nuestra animación. Entonces podemos reducir hacia abajo el margen izquierdo. Probemos valor negativo de 100 píxeles, vea cómo se ve esto. Esose ve mejor. A lo mejor 120. Bueno. Esto ahora tira de la palabra, Fábrica, para estar justo debajo de la palabra, pastel. 8. Animación 6: variables, rotaciones y retrasos en el cálculo: Bienvenido de nuevo y comencemos con nuestra animación en el Número 6, [inaudible] trabajando nuestros proyectos actuales. Cambie el nombre de este número 6. Nos quedaremos con la fábrica Text of the Cupcake, pero haremos esto un poco diferente solo para mantenerlo interesante. Por el momento, podemos retirar la envoltura de fábrica, que rodea todos los textos de fábrica. Quitar este div, que es la apertura y las etiquetas de cierre para éste. Hasta el cuerpo, haz esto un poco más grande. Vamos por el tamaño de fuente 100 pixeles. Mezclaremos las cosas con un color de fondo diferente. Puedes colocar esto como cualquier color que quieras, pero voy a ir por 1f1c1c, solo para darle a este un color de fondo más oscuro. Podemos quedarnos con el contenedor del título. Ya no necesitamos esta clase de magdalenas. También eliminaremos el envoltorio de fábrica para que también podamos eliminar el CSS correspondiente. Solo para restablecer el color de las palabras cupcake, agrega esto al cuerpo. El color que era gris pizarra claro. Ahora estamos bien para ir con nuestra animación. Esta va a ser una serie de rotaciones tanto en el eje x como en el eje y y vamos a echar un vistazo a cómo hacerlo agregando esto a cada una de nuestras letras con el elemento span. Vamos a agregar el span. Dentro de aquí es donde colocaremos nuestra animación. Haciendo uso de los primeros fotogramas clave, lo que haremos es llamar a este RotaTex. Solo necesitas un solo estado porque estamos rotando desde el valor original hasta 90 grados, así podemos colocarlo como un valor de cero por ciento. Esto va a tomar en una transformación que gira el texto en el eje x. Dentro de los corchetes, podemos colocar en un valor dentro de grados, y si quieres ver cómo se ve esto sin la animación, simplemente podemos colocarlo en nuestros elementos span. Si guardamos esto como 90 grados, no veremos nada en la pantalla porque esto se está rotando fuera de la vista. Pero si cambiamos esto para que sea un número diferente, como 100, podemos ver la rotación de 120. Este es el efecto que vamos a lograr rotando esto en el eje x y luego de vuelta al estado original. Vamos a mover esto, colocarlo como una animación, de tres segundos, el nombre de los fotogramas clave de RotaTeX. Guarda esto, y ahora puedes ver que comienza en el valor de 90 grados una vez que comienzas en cero por ciento y luego regresa al estado predeterminado. Este está rotando sobre el eje x pero lo que también podemos hacer es rotar sobre el eje y para darle un efecto de giro a este. Para ello, llamaremos a nuestros fotogramas clave spin. Como solo queremos comenzar un solo valor igual que aquí, comenzaremos en cero por ciento también haciendo uso de la transformación, pero este va a ser RotateY. Para hacer un giro completo, vamos a necesitar rotar estos 360 grados, así que hasta nuestro lapso, colocaremos esto en nuestra animación. Este va a ser giro. Acortaremos esto a dos segundos, guardaremos y esto luego girará nuestro texto 360 grados y luego lo girará de nuevo al estado inicial. Como podemos ver, esto sólo se repite una vez, pero también podemos establecer cuántas veces queremos que esto se repita. Si queremos dos, reemplace esto en él justo después, esto gira dos veces y también podemos seguir repitiendo esto fijando esto al valor de infinito. Se trata de dos formas diferentes en las que podemos rotar ya sea en el eje x o en el eje y. Pero otra cosa también podemos hacer en lugar de rotar todo al mismo tiempo, así que por el momento cada una de estas letras están rotando exactamente al mismo tiempo para darnos este efecto. Pero también podemos hacer esto un poco más complejo añadiendo un retardo de tiempo entre cada uno de estos. La forma en que podemos hacer esto es agregando una variable a cada una de nuestras letras. Esto lo haremos en forma de atributo de estilo. No necesitamos esta clase en cada una de estas secciones de cupcakes y podemos reemplazarla con los atributos de estilo. Esto equivale a una variable a la que voy a llamar —i y establecer la variable igual a un valor. El valor va a ser incrementado por el valor de uno de estos vanos. Esto significa que esto se multiplicará en el retraso de tiempo. No te preocupes si esto no tiene sentido en este momento, solo copiaremos esto y pegaremos en cada una de estas letras. Vamos a echar un vistazo a cómo funciona esto exactamente en un momento. Después Número 3, colocaré esto en cada una de nuestras cartas. Lo que tenemos ahora aquí es una variable llamada —i y cada una de ellas tiene un valor correspondiente. Podemos bajar a nuestra animación, que está justo aquí. Mantendremos la animación de giro que gira 360 grados sobre el eje y. En lugar de hacer todo esto al mismo tiempo, podemos agregar un retardo de animación para cada uno de estos personajes. Después de la animación, pasando un retraso de animación. Si quisiéramos podríamos simplemente hacer un retraso como un segundo y esto se aplicará a todo el asunto. Como no tenemos ninguna referencia a nuestras variables, solo estamos aplicando esto a cada uno de los vanos. En cambio, podemos aplicar un cálculo, la función calc, y vamos a retrasar cada uno de estos en 0.1 segundos. Multiplicaremos esto por el valor de la variable, que es —i. Dándonos este bonito retraso para cada uno de nuestros elementos span. Veamos esto una vez más. Lo que he hecho aquí es que hemos agarrado cada una de nuestras variables una a la vez. El primero, multiplicaremos 0.1 segundos por uno. Esto simplemente será 0.1 de segundo, y luego esto será 0.2 de segundo, 0.3 hasta la última letra, que es la y, y esto se retrasará 1.7 segundos. Restablecer el color como un toque muy final. También agregaremos esta clase de fábrica a nuestras letras, así que la clase es igual a fábrica, copie y pegue esto en las siguientes letras. Ahí vamos, y ahí está nuestra animación que muestra cómo podemos rotar en el eje x y usando las transformadas de rotación y también cómo podemos agregar un retardo de tiempo diferente a cada uno de nuestros personajes, como hacer uso de la función calc y variables. 9. Animación 7: colores móviles: Bienvenido de nuevo. Comenzaremos en nuestra animación número 7, bifurcando nuestro proyecto actual. Para obtener todos los estilos y contenidos básicos. Llamaremos a este número 7. Esta va a ser una animación relativamente simple usando cosas ya aprendidas, pero también una muy guapísima también. Lo que vamos a hacer es trabajar con varios colores, y también haremos uso de las variables en el retardo de animación, donde hemos trabajado anteriormente. Esto va a filtrar en nuestros cuatro colores diferentes y girarlos alrededor. Para ello solo necesitamos un conjunto de fotogramas clave. Los fotogramas clave llamaremos a esto el color. Simplemente estableceremos la propiedad de color CSS. El primero va a comenzar en gris pizarra claro. Después colocaremos en él tres colores separados. Cuatro colores en total. El siguiente será al 25 por ciento. El color depende de ti, pero voy a ir por el rosa intenso al 25 por ciento. cincuenta por ciento será del color caqui. Después al 100 por ciento, el color del azul claro. Veamos cómo se ve esto si ponemos el color en nuestra animación. Voy a convertir esto en una animación de cinco segundos. Si guardamos esto, ahora podemos ver nuestros colores comienzan a rotar a través de nuestras diferentes etapas de la animación. Pero también sólo ocurre una vez. Recuerda, anteriormente también podemos hacer que estas animaciones se ejecuten en bucle. Podemos establecer cuántas veces queremos que esto se ejecute, o también podemos establecer esto para que sea un valor de infinito. Esto mantendrá nuestra animación en constante funcionamiento. También se puede ver una vez que llegamos a cierta etapa de la fábrica el texto todavía tiene este color amarillo, que configuramos previamente. También necesitamos eliminar las clases de cada una de estas letras. Eliminar todos estos. Esto se guarda, y esto ahora se ve mucho mejor, no tenemos ningún conflicto en CSS. También podemos quitar el color de fábrica. Esto funciona como lo hemos hecho en videos anteriores, porque tenemos esta variable que agrega el time delay o un delay de animación a cada una de estas llamadas. Cada uno de estos colores se aplica a las letras de izquierda a derecha después del retraso de tiempo de 0.1 segundos. 10. Animación 8: cartas que rebote: Aquí vamos con animación Número 8. Este va a ser bastante sencillo al construir sobre lo que tenemos anteriormente. Actualmente en la animación anterior, que es el Número 7, creamos un retardo de animación que provoca este efecto, y el ciclo de color de izquierda a derecha. Esto lo hicimos insertando una variable, y luego tomamos en cuenta este retraso de tiempo. Lo multipliqué por 0.1 segundos. Recorrimos los cuatro colores en varias etapas, y construiremos sobre esta animación para el Número 8, causando un efecto de salto a cada una de ellas. Esto lo haremos haciendo uso de la escala de transformación y, que hemos utilizado anteriormente para expandir cada uno de estos caracteres verticalmente. Voy a hacer esto con un retraso de tiempo entre cada uno. Vamos a bifurcar esta pluma actual y renombrémosla para que sea Número 8. No va a ser mucho color para éste, pero vamos a hacer que se vea mucho mejor. Salta al fondo de esto, crearemos una segunda regla de fotogramas clave. Llamaremos a esta ola para darle a esto un efecto de onda. Ahora, puedes volverte realmente loco con esto. Puedes agregar tantas transformaciones como quieras sobre varias etapas. Pero un efecto agradable, simple y sutil es hacer esto a mitad de camino o 50 por ciento, donde podemos establecer la transformación para transformar la escala en el eje y, y esto puede ser cualquier valor que quiero. El valor de uno es solo el tamaño regular del lapso. Pero vamos a hacerlo 1.3 veces el tamaño. Usando nuestra onda, podemos agregar esto como una segunda animación a nuestro span, separarlo por una coma. Vamos a darle una oportunidad a esto en dos segundos. Está en nuestra ola. Ahora veamos cómo se ve esto. Tenemos un bonito efecto que se ejecuta de izquierda a derecha con el mismo retraso de tiempo que usamos anteriormente. Pero solo voy a acelerar esto también. Intentemos un segundo. Eso está bien. Vamos un poco más despacio, 0.7. Puedes jugar con estos valores y hacer que funcione exactamente como quieras. Pero así es como podemos combinar estas dos animaciones para crear un efecto de aspecto agradable. 11. Animación 9: efecto del brillo: Bienvenido de nuevo para Animación número 9. Vamos a mezclar un poco las cosas y trabajar con un título diferente. Enfócate, vamos a crear una copia. Este es el Número 9. De hecho que éste va a usar un texto diferente así que llamaremos a estas sabrosas hamburguesas y luego saltaremos al HTML. Vamos a mover cada uno de estos vanos desde el interior del contenedor de título y simplemente colocando un elemento p. Este elemento p va a contener el texto de sabrosas hamburguesas. Lo que me gustaría hacer para este es crear un bonito efecto de brillo de neón al fondo. Para ello, vamos a trabajar de nuevo con la animación, pero vamos a hacer uso de la propiedad CSS de sombras de texto. Empezaremos con la sombra tecnológica para tener cierto valor. Entonces para la animación la aumentaremos y luego la reinstalamos nuevo al valor más bajo y ya ves cómo va a quedar esto muy pronto. Al cuerpo, podemos mantener la altura de la pantalla. Podemos mover este color para el texto. El contenedor de título para mantener esto en el centro moverá el span ya que hemos eliminado todos los elementos span y solo estamos trabajando con este contenedor de título. Los fotogramas clave, solo necesitamos un conjunto de fotogramas clave ya que usaremos la animación única con el contenido y cambiaremos el nombre de esto para que sea glow. Ya que vamos a estar animando de un estado a otro, podemos usar cero por ciento o 100 por ciento. O podríamos usar lo que hemos mirado anteriormente, que es desde y hacia. Este es el estado de principio y fin. El resplandor. Esto va a ser causado por la creación un color diferente y también una sombra de texto. A partir del estado, que es el comienzo mismo, estableceremos el color para que sea un color gris claro de CCC. Entonces dentro de los dos estados, cambia el color para que sea simplemente blanco. Volveremos a esto en un momento y veremos cómo se ve esto agregando nuestros fotogramas clave al contenedor de título dentro de la propiedad de animación. Yoenvío un resplandor. Hará esto en un periodo de dos segundos. Nuestra animación funciona como puedes ver. Sólo vamos a refrescar esto. Comienza desde el color gris, que es CCC, y luego pasa al color blanco antes regresar al estado negro predeterminado. Ahora hay un par de cosas que queremos hacer para mejorar en esto. En primer lugar, queremos que esto siga funcionando infinitamente para que podamos agregar la propiedad infinita dentro de aquí. Esto hará que la animación siga corriendo desde el color frontal hasta el blanco. Podemos casi ver que esto surta efecto , pero lo que sería realmente bueno si pasamos del CCC de Color al blanco, y luego volvemos a CCC y luego volvemos al blanco y seguimos recorriendo cada uno de estos corparientes sigue pedaleando por la animación y yendo de arriba a abajo. Para que estos vayan de manera alternativa, también podemos agregar en una propiedad llamada alternate. Mira cómo se ve esto. Esto ahora gira entre cada uno de estos colores. Podemos ver esto mejor si lo cambiamos para que sea un color más oscuro, como el rojo. Esto claramente está funcionando. Reinstalaremos esto de nuevo a nuestro CCC. Entonces para dar este efecto de brillo en segundo plano, vamos a hacer uso de la propiedad CSS llamada text-shadow. Cuando el del estado, en la sombra del texto. No queremos ningún desplazamiento en el eje x o el eje y para la sombra simplemente lo queremos en el centro de cada uno de estos personajes y luego empujando desde el centro. Lo mantendremos a las 00. Podemos agregar una sombra de texto de 10 píxeles y el color de cian. Estees el frente. Copia esto y agrega esto a las dos secciones. Pero esta vez va a ser un poco más grande. Vamos por 50 pixeles. Ahora está en ciclos a través de nuestro valor más pequeño o mayor. Entonces al igual que lo hizo con el color ya que estamos usando la propiedad ultimate, volverá al pequeño valor y seguirá yendo entre los dos. Esto ahora nos deja con este bonito efecto resplandeciente para nuestro logo. 12. Animación 10: trayectorias en las ondas del fondo y los recortes clip: Enhorabuena, llegaste a la animación final y esta va a ser un efecto realmente genial. Como siempre bajaremos al botón Tenedor para crear una copia, y cambiaremos el nombre de esta. Este va a usar un fragmento de texto diferente. Voy a llamarlo el Waterside Cafe que es nuestra animación número 10. Vamos a darle a esto un tema de agua porque vamos a estar usando un fondo de agua. Veremos cómo se ve esto en un momento. Por ahora, eliminaremos el contenedor del título. También podemos eliminar estos fotogramas clave, y también reemplazar los textos con Waterside Cafe. Podemos mover esta clase. Entonces le da a nuestros textos una carga de trabajo de clúster. La clase va a ser igual a wave porque vamos a estar creando un efecto de onda estilo agua. Tendremos el bosquejo de nuestros textos actuales, que es Waterside Cafe. Entonces en el fondo, tendremos algún efecto regado, que va arriba y abajo como una ola. Esto nos va a dar un efecto muy bonito. Para ello, voy a cambiar la familia de fuentes. Vamos por Garamond. Podemos mantener el fondo que está completamente bien. Todo lo demás está bien. Después bajamos a nuestra clase de olas. Para comenzar, antes de hacer alguna pieza de animación, vamos a asegurarnos de que el texto esté delineado. Podemos ver la ola efectivamente pareciendo que se mueve hacia arriba y hacia abajo dentro de cada una de estas letras. Para ello, vamos a hacer uso de dos propiedades, que es el ancho del trazo de texto y también el color del trazo del texto. El trazo nos va a dar el contorno de cada carácter en lugar de una letra completamente sólida como la que tenemos. Esto hará uso del prefijo Webkit para asegurarse de que es compatible en los navegadores modernos. Después un ancho de trazo de texto. Configuré la línea para que tuviera un píxel de ancho. Podemos ver que esto establecerá el color del fondo para que sea transparente. Entonces establece el color de nuestro trazo de texto para que sea cualquier cosa que quieras, y quiero ir por ir por azul claro. Nuevamente, al igual que la propiedad anterior, también necesitamos usar el prefijo Webkit para la compatibilidad, así que el color del trazo del texto. Quiero ir por el azul claro. Esto nos da la base del efecto. Tenemos el esquema y luego el siguiente paso es crear nuestra animación, que va a ondear arriba y abajo a través de nuestro texto. Crea nuestros fotogramas clave de onda. Para ello, necesitaremos hacer uso de algo llamado clip-path en forma de polígono. Echemos un vistazo rápido a cómo trabajamos con esto. Un clip-path es efectivamente una forma o un camino que corta o bloquea el resto del contenido. Has creado un clip-path con un círculo. Esto enmascara la imagen bloqueando todo el contenido que la rodea. Debajo de esto, tenemos forma de elipse, lo que nos da este borde redondeado. Después de esto, tenemos un polígono que está en forma de diamante, luego una forma completamente diferente abajo en la parte inferior. Para lograr cualquiera de estos caminos necesitamos pasar en una serie de puntos o coordenadas. ¿ Cómo conseguimos estos? Bueno, podríamos jugar con estos números manualmente. Podríamos dibujar estos en ciertos gráficos, programas, o también podríamos usar algunos generadores en línea. Un ejemplo de esto es un sitio web llamado cssportal.com, este tiene un generador de clip-path que nos da muchas formas diferentes para comenzar. Se puede ver que todos estos enmascaran la forma del fondo. También podemos arrastrar cada uno de estos puntos para crear un clip-path diferente. Esto se genera automáticamente para nosotros. Esta es una manera realmente sencilla de crear nuestros clip-paths. Ya que estamos creando un efecto de onda, lo que queremos ver es algo como un polígono personalizado. Esto nos da múltiples puntos a lo largo de la página. Podemos dar click en varias etapas la imagen, tal como están aquí. Voy a crear tantos puntos diferentes como quiera. Como puedes ver, esto nos da este clip-path, que es una forma de polígono. Entonces dentro de cada uno de estos puntos se encuentran cada uno de estos puntos que tiene una cierta posición sobre el eje x y el eje y. Puedes seguir adelante y jugar con estos valores si quieres. Ya tengo algunos números en mente que voy a estar usando. Volvamos a nuestro proyecto en los fotogramas clave. La idea detrás de esto, lo que vamos a hacer es establecer dos conjuntos separados de clip-paths. Vamos a establecer un cierto camino que va a ser el estado inicial en cero por ciento. Establecer regla de cero por ciento. Entonces cambiaremos esta mitad del 50 por ciento para que sea un estilo de onda diferente. Esto hará una transición entre nuestros dos valores. Entonces al final mismo, al 100 por ciento, volveremos al estado original. Con esto en mente, también podemos usar una taquigrafía que separe ambos valores con una coma, y luego colocar nuestros clip-paths dentro de estos. Empecemos. Al igual que hemos visto en el generador, usaremos el clip-path que es una forma de polígono. Luego dentro de los corchetes, insertaremos cada una de las rutas que queremos usar. La primera posición está en cero por ciento y luego 65. Después pasaremos por una serie de todos los puntos tal como hemos visto en el generador. El siguiente es 15 y 49 por ciento, es todos los valores presentes separados por una coma, 32 por ciento y 55 por ciento, 58 y 69, 69, 74, 82 y 89, 94, 93, 100 por ciento, y 100 por ciento, y 100 por ciento, y el último para este es cero por ciento y 100. Este es el estado inicial y final de nuestra transición. Entonces podemos hacer la transición a un valor diferente dentro del 50 por ciento. Al igual que antes, configuraremos nuestro clip-path, que es un polígono y luego insertaremos nuestros valores. Estos valores van a ser una pequeña variante en los números arriba da un efecto de aspecto sutil, comenzaremos en cero por ciento y 60 por ciento, 12 y 65, 31 y 66, 49 y 62, 57 y 50, 68 y 45 por ciento, 100, 46, 100, 100, y luego finalmente a cero por ciento y 100. Este es nuestro clip-path ya terminado. Vamos a hacer la transición entre estos dos dentro de nuestra ola, como siempre lo haremos con la animación, pasaremos en nombre de los fotogramas clave. Mantener esto relativamente lento a lo largo la duración de seis segundos. También queremos repetir esto con infinito. Ahora en cuanto hagas esto, notarás que la animación comienza a surtir efecto, pero no es exactamente el efecto que queríamos. Queremos mantener el contorno de este Waterside Cafe en todo momento e insertar efectivamente la ola en su interior. Actualmente, como puedes ver nos quitaron en el texto del esquema en lugar de colocar la onda en su interior. La forma de hacerlo es que también vamos a acceder a nuestra ola justo arriba. Vamos a añadir los pseudo-elementos de antes. Esto efectivamente agrega un elemento hijo antes de nuestra ola. Efectivamente creando algo justo antes estos elementos p sin crearlo realmente. Pero, ¿qué es lo que realmente queremos crear? Queremos insertar nuestra animación, así podemos cortar este nuestro lugar y pegarlo en. Asegúrate de que estos elementos que acabamos de crear también el mismo contenido que vemos aquí. También podemos agregar la propiedad content que va a agregar el texto de Waterside Cafe. Esto lo mantiene en la misma forma que lo que tenemos actualmente. Pero como puedes ver ahora, si salvamos, efectivamente tenemos dos elementos. Esto es antes de los elementos, y éste es uno que creamos con los elementos p. primer paso es eliminar esto de los documentos y colocarlo directamente detrás. Podemos hacer esto estableciendo el valor de posición CSS para que sea el valor de absoluto. Lo que esto hace es, esto efectivamente saca el flujo del resto del contenido, lo que significa que efectivamente no ocupa ningún espacio. Ahora que hemos hecho este contenido ahora se sienta detrás de la ola original o del texto original, lo que significa que no podemos verlo. Para ver esto, en realidad necesitamos darle algo de color a esto. Vamos a poner esto en azul claro, con el mismo color que el contorno del texto. Dándonos este bonito efecto de onda de agua, que parece estar dentro del texto. 13. Gracias: Una enorme enhorabuena de mi parte, por tomar esta clase y llegar hasta el final. Espero que lo hayas disfrutado y también hayas aprendido algunas técnicas nuevas. Ojalá puedas poner en práctica algunas de estas técnicas en un proyecto futuro, y tampoco puedo esperar a ver qué has creado compartiendo tu proyecto en el área de proyectos de Skillshare. Una vez más, gracias y espero verte en una futura clase.