Animaciones CSS3 con transiciones y transformaciones

1. Introducción: Hola a todos. Yo soy Kirsten Swanson. Actualmente soy desarrollador Fernand. Traer carpeta. Y estoy muy emocionado de estar aquí en todavia compartir para enseñarte sobre animaciones CSS. En primer lugar, déjame darte un poco de introducción sobre mí mismo. Empecé a mercadotecnia y como licenciatura y justo después de terminar, quería explorar el mundo y viajar. Por lo que terminé enseñando inglés en Corea del Sur durante dos años. Cuando volví a los Estados, era técnico de ingeniería en el pozo, le preguntó a la industria Con la bajada del petróleo un precio en aproximadamente como 2015 decidí explorar nuevas trayectorias profesionales. Yo sólo quería algo que fuera más desafiante y creativo. Y fue en realidad cuando estaba de excursión con una amiga y ella me habló de codificar campamentos de botas . Al principio estaba muy vacilante, y solo necesito ajustar el agua. Así que terminé tomando algunos cursos gratuitos en línea, y terminé enamorándome de Cody, sobre todo de CSS. Entonces eso me hizo y rodar en un campamento de arranque de codificación llamado Torreon School of Software and Design y no lo hizo por Colorado. Me inscribí en el frente y pervertido el cual se enfocó para en el diseño y la interfaz de usuario En 2017 me gradué. Y tengo que ser honesto, esa fue la mejor decisión que tomé al cambiar Curb Pass. Por lo que ahora me emociona compartir mi conjunto de habilidades y pasión de CSS con ustedes chicos. Este curso va a ser sobre CSS tres animaciones. No incluye una animación pesada con mi hermano y ni siquiera conoces guión drop. Pero sí necesitas conocer los conceptos básicos de CSS. Entonces, empecemos y diviértanse. 2. Resumen del proyecto: para tu proyecto de curso, estarás creando un collage interactivo de iconos animados. Escogerás tu propio fondo así como iconos, por lo que cuando pases por encima de los iconos, habrá algún tipo de animación. Algún buen recurso es para espalda. Imágenes propias están en chapoteo. Esta es una gran galería de fotos en stock así como de píxeles y luego para iconos. A mí me gusta usar iconos planos tan bien como puedo encontrarla. También estaré incluyendo un repositorio en el plan de lecciones, y esto incluirá en cada uno a mull Pile Puedes ver aquí. Aquí es donde insertarás tus imágenes y luego también una elegante ella. Y aquí es donde estarás posicionando tus iconos. Absoluto posicionado. Espero ver sus proyectos terminados al final de este curso. De acuerdo, empecemos y aprendamos sobre las animaciones CSS. 3. Descripción de animaciones de CSS: este curso es sobre CSS tres animaciones con transiciones y transformaciones. En primer lugar, les voy a dar una visión general amplia de CSS tres animaciones, y luego repasaré las transiciones y después las transformaciones. Y por último, vamos a hacer algo de revestimiento vital. Después de eso, tu proyecto estará haciendo tus propias innovaciones. Por lo que en primer lugar, CSS tres innovaciones proporcionan mucho valor a sus interfaces. Pueden proporcionar retroalimentación visual que hacen deliciosas. Las micro interacciones en thes típicamente pueden convertirse en interacciones memorables para los usuarios. CSS tres animaciones alterarán el elemento de horno de apariencia o comportamiento cuando cambie su estado , por lo que esto podría estar encendido como un hover o foco o estado activo. Las animaciones deben ser simples en movimientos sutiles. Deben ser animaciones consistentes, y deben mejorar la experiencia del usuario y no distraer de ella. También ver usos. Tres animaciones son geniales porque no necesitan script Java ni una biblioteca de animación. Estas son algunas tablas de ¿Puedo usar sitio web en? Esto solo muestra que CSS tres transiciones y transformaciones son compatibles con razón en múltiples navegadores 4. Descripción de transiciones: Entonces primero repasaré las transiciones, y está haciendo que los elementos cambien suavemente y poco a poco a lo largo de una duración especificada. Entonces si no tienes una transición en un elemento cuando se transforma, cambiará abruptamente. No será una transición suave, así que típicamente, cuando tengas una transformación, tendrás una transición. Hay cuatro propiedades de transición. Se trata de transición, transición patrimonial, duración, tiempo de transición y función en transición. Retrasar un jugoso el primero a esos aire requeridos para las transiciones. Los otros dos son necesarios. Para que una transición al trabajo, puede ordenar cada propiedad individualmente o puede usar la taquigrafía, y eso es recomendable para un código más rápido y limpio. 5. Propiedades de transición: Ahora hablaremos de las propiedades individuales de transición, por lo que el 1er 1 que se requiere es la propiedad de transición, y el especifica la propiedad a transitar. Entonces digamos, si quieres el color del borde o el color Baccarín, aquí es donde lo especificas. De lo contrario, si pones el valor de todos, entonces estás cambiando todas sus propiedades que podrían ser animadas. Aquí en realidad hay una lista de todas las diferentes propiedades que se pueden animar, por lo que puedes ver que es una lista bastante grande. A continuación se muestra una duración de transición, y a especifica el lapso de tiempo de la transición, y este valor se escribe en segundos. La función de temporización de transición especifica la velocidad de la transición a lo largo de la duración. Por defecto, está configurado a gusto. Las otras opciones incluyen facilidad lineal en facilidad de salida. Está adentro fuera en cubic busier cubic busier te permite definir tu propia curva de tiempo. Entonces echemos un vistazo a esta hoja de tramposos para mostrarte tipo de cómo se ve eso. Entonces aquí mismo estos aire diferente cúbico hace orejas. Se puede ver que los tiempos de transición son todos diferentes. Si quisieras obtener el código real, entonces podrías hacer click en él y luego nosotros cada año puedes ver que esta es la función de tiempo real que necesitarías. Entonces esto sería como si tu estuviera dentro o fuera. El último es el retraso de transición, y esto especifica cuándo se iniciará la transformación por defecto. La transición comienza tan pronto como se desencadena el cambio de estado en el elemento. Entonces digamos que si pasas el mouse sobre un elemento al pasar el cursor, se va a activar de inmediato, pero puedes ponerle un retraso, y se activaría de inmediato. 6. Transforma la descripción: ahora vamos a hablar de transformaciones. Esto es cuando un elemento se mueve o cambia y apariencia. Los principales tipos de transformaciones nuestra rotación, sesgada escala y traducir. Girar es cuando un elemento gira en sentido horario o antihorario, y esto se especifica por el número de grados. Skew es cuando un elemento se inclina en función de los valores proporcionados en los ejes X e Y. Esto también se especifica por el número de grados. Escala es uno en el elemento aumenta o disminuye, y esto es por un entero basado en la altura y el ancho del elemento. Traducir es cuando un elemento se mueve a la derecha, izquierda hacia arriba o hacia abajo, y esto se especifica por píxeles. Se pueden combinar múltiples transformaciones para tener un elemento que se traduce y gira . Por último, origen de la transformación es separado de la propiedad transformada pero se puede utilizar en conjunto con ella para especificar la ubicación. Origen de la transformación 7. Selector de CSS y revisión de bienes de propiedad: antes de pasar al recubrimiento de vida. Vamos a revisar selectores y propiedades CSS, para que tengas tu elemento. Podría ser tu etiqueta P o tu etiqueta de cabecera o tu div. Después tienes tu propiedad, que va a ser tu color de fondo de color borde, y luego tienes los valores especificados aquí. Entonces cuando estamos hablando de transiciones y transformaciones, esas serán nuestras propiedades. Por lo que aquí, en una transición, lo especificarás como tu propiedad. Y entonces estos serán los valores para una transformación. Se especificará. Aquí está la propiedad, y luego los diferentes valores podrían girarse. Se traduce o escala para poder ver visualmente el estado de un cambio de elemento. Vamos a estar usando la pseudo clase de hover, así que vamos a poner esto al final del elemento. Por lo que tienes el elemento de un colon que hover. Después tienes tu propiedad y luego tu valor. Entonces, por ejemplo, hay una clase de enlace en. Si tienes ah, hover pseudo clase sobre él, se va a poner azul cuando se cierne sobre él. Ahora sigamos adelante y en realidad hagamos algo de revestimiento vital 8. Ejemplos de transición: bien en el recubrimiento en vivo. Yo estoy usando el afrontamiento aquí. Se trata de un editor online gratuito que se encuentra en tu navegador, así que primero vamos a hablar de transiciones, estaremos usando la plaza y ponerle animación en ella. Entonces primero, agreguemos la pseudo clase de hover a ella para que podamos ver cuándo cambia el estado. ¿ Qué tal si hacemos el cambio de color de fondo? Bueno, dile a un bonito morado, pero se puede ver cuando se cierne sobre él. Es un cambio realmente abrupto. No es suave, así que aquí es donde viene la transición de la mano. Entonces estaremos usando la taquigrafía de la transición porque eso va a estos código más limpio, más ágil. Y si recuerdas correctamente, primero estarás poniendo la propiedad cuando pongas federación, luego la función de temporización y por último, el retraso. Hay un orden específico a esto, y quieres asegurarte de que lo hagas en el orden correcto. Entonces hagamos una transición para este color de fondo especificar en el color de fondo aquí porque es la propiedad que estamos cambiando. Y digamos que queremos que eso tome cinco segundos. Veamos qué es Bacca que ahora es una transición suave. No cambia tan rápido. Después de los segundos de pelea, podemos poner una función de temporización. Pongámonos las llaves, bro. Esto cambia la apariencia de la transición. Por último, se puede poner un retraso. Pongamos un segundo retraso, para que cuando se cierne sobre la plaza, no va a cambiar de color de inmediato. ¿ Ves cómo el morado no se llevó a cabo de inmediato? Es porque toma un segundo de rondar sobre la plaza antes de que realmente cambie. Añadamos otra propiedad a esta plaza. Vamos a tener una frontera a ella, pero esto se convierte en un borde púrpura. Ahora queremos cambiar la frontera en el hover también. Cambia esto a un verde. Por lo que como puedes ver, el borde no cambia al mismo tiempo que la imagen de fondo. Esto se debe a que en nuestra transición sólo estaban especificando el color de fondo. Entonces como también estamos cambiando la frontera, podemos decir todo aquí y ambos deberían cambiar al mismo tiempo. Ahora 9. Agregar prefijos de proveedores para navegadores mayores: Hay tantas propiedades diferentes que puedes cambiar. Aparte de sólo el color, como la lista que te mostré antes Aquí, puedes cambiar el con el alto margen acolchado tantas propiedades diferentes que puedes anime. Además, al usar transiciones y transformaciones, desea asegurarse de agregar los prefijos de proveedor como Web Kit, Mozilla Opera e Internet Explorer para transformaciones, y esto es con el fin de admitir navegadores más antiguos. 10. Transforma el ejemplo: Ahora nos estamos moviendo en transformaciones, que creo que es la parte más divertida de las animaciones porque se llega a cambiar la apariencia de los elementos y se llega a hacer que se muevan. Entonces primero voy a ir a rotar, así que pondremos una transformación en las casillas. Will Roque octavo, Um, y los seis, el valor de los grados. ¿ Qué tal si hacemos 50 grados? Entonces cuando pasemos el cursor, estos elementos girarán 50 grados y ya ves, no es una transición muy suave, por lo que eso significa que necesitamos poner una transición ahí. Démosle un segundo. Ya puedes ver ahora el movimiento es suave. Digamos que queremos ir en sentido contrario a las agujas del reloj pondrá un negativo en este grado. ¿ Y si queremos que gasten realmente rápido? Pongamos un grado más grande en esto. Eso es muy divertido. 11. Transforma el ejemplo de la Skew: la transformación sesgada es similar a la transformación de rotación y que toma grados ya que el valor sq es cuando un elemento se inclina en función de los valores X o Y dados. Por lo que los huevos sesgados, esto será sesgado en base al eje X. Pongámoslo 10 grados. Si es un número positivo, se lo va a decir a la izquierda. Si es negativo, se inclinará hacia la derecha. Ahora con esto. P. Por qué esto se va a inclinar en el acceso Por qué. Entonces si es un número positivo, se inclinará hacia abajo. Y si es negativo, se sesgará antipático. Si tan solo especificas sesgado, el elemento dormirá sesgado en función del eje X. Pero también puedes poner en los EAU que todo lo que escuchas está bien y sesgará a Berks 25 grados en el eje X y luego 10 grados en el eje Y 12. Transformar un ejemplo de escala: al igual que la transformación de sesgo, la transformación de escala se puede transformar en los ejes X e Y. Esa escala toma un valor de un número, así que pongamos el número para ver qué pasa. Ese elemento obtiene el doble de tamaño que su tamaño original, y también se puede ver que este cambio no es muy suave. Entonces sigamos adelante y sumamos una transición. CNN le dará una duración de un segundo. Cómo es muy suave. De acuerdo, ¿qué tal vamos a encoger el elemento para que pongamos a la mitad del tamaño del mismo. ¿ Qué tal vamos a cambiar la habilidad al eje X? Y también podemos cambiarlo al por qué o a la taquigrafía aquí podemos poner en ese valor X en el valor Y, y el elemento se cambiará en ambos ejes. 13. Transformar un ejemplo de traducción: la última transformación que voy a discutir es la transformación de traducir. Siento que esta transformación se usa mucho en ti. Yo, por ejemplo, en total, citando y o alguna confirmación que aparece. Siento que muchas veces tenemos muchos objetos elementos del dedo del pie apareciendo en la pantalla. El transformado de traducción mueve un objeto hacia arriba o hacia abajo en el eje Y o hacia la derecha o hacia la izquierda en el eje X. Entonces juguemos con este círculo aquí mismo. Vamos a traducirlo X, y el valor que entra aquí es en píxeles. Entonces pongamos 20 píxeles, y esto va a hacer que el elemento vaya bien. Se puede ver que es un poco timboso, así que vamos a añadir una transición inhibida duración de segundos fraile mucho mejor y más suave. De acuerdo, entonces ahora si conseguimos esta caída tu negativo, el elemento irá a la izquierda. Ahora bien, si traducimos por qué el elemento va a subir y si es un número positivo, elemento bajará. También puedes usar la versión abreviada de Traducir en. El elemento irá a la derecha. 20 píxeles en abajo 30 píxeles. Está bien. Creo que este es un buen momento para que podamos experimentar con todos estos círculos y también vamos a jugar con la función de temporización. Podemos ver cómo el movimiento que el movimiento de estos círculos puede ser diferente cuando pones una función de temporización diferente en. Entonces vamos a mover todos estos círculos cuando se cierne todo el contenedor. Entonces, ¿qué tal si nos movemos en el acceso exacto por 300 píxeles? Entonces, ¿todos los círculos se van a mover 300 píxeles? Y como puedes ver, no es muy suave. Entonces vamos a transiciones a todos estos círculos. Al agregar esta transición, será una más suave como se puede ver, todos van a la misma velocidad. Pero pongamos bien una función de temporización. Experimenta con los diferentes que tenemos. Pongámoslo, alimenta. Está encendido, deja fuera, está y fuera, ya sabes cuando vas a venir función. Por lo que estos sólo hacen que la velocidad de las transiciones sea diferente. Entonces veamos qué hace esto. Ahora. Se puede ver que estos círculos se mueven a diferentes velocidades. Eso se debe a la función de temporización que acabamos de agregar. Entonces traducir es una transformación muy poderosa, y siento que podemos usarlo mucho en ¿Eres tú y realmente mejoró la experiencia del usuario 14. Combinar múltiples transformaciones: no lo olvides, puedes combinar múltiples transformaciones juntas. Los escribirás en línea así sin un cínico en separarlos. Pero recuerda, quieres tener en mente a tu usuario final y mejorar su experiencia en lugar de abrumarlos así. Pasa por aquí. Bueno, engratos, Guías. Terminas el curso. Espero que te pongas creativo con tu proyecto. Y espero con interés ver su trabajo terminado. Esperemos que este curso sobre animaciones CSS fuera perspicaz y en el futuro. Podremos añadir momentos encantadores a tus tuyos. Agradezco de nuevo por tomar mi curso, y espero que hayan aprendido mucho.