Тёмный

Tutorial para aprender Animaciones CSS 

ManzDev
Подписаться 19 тыс.
Просмотров 16 тыс.
50% 1

¿Quieres aprender a crear animaciones CSS? ¡Has llegado al lugar apropiado! Con las animaciones de CSS puedes suavizar cambios estéticos y hacer atractivos efectos para colocar en tu página y que se activen de forma autónoma.
¡Te explico como funcionan!
TIMELINE:
00:00 Introducción
01:38 Transiciones CSS
02:33 Regla keyframes
03:28 Nombre, duración y ritmo
04:35 Fotogramas clave (from / to)
05:05 Propiedad de atajo (intro)
05:36 Fotogramas clave porcentuales
09:45 Número de repeticiones
10:28 Retardo de la animación
10:42 Modo de relleno (fill mode)
11:58 Dirección de la animación
13:28 Estado de la animación
14:44 Propiedad de atajo
15:45 Animaciones encadenadas
18:44 Pregunta: Animaciones con CSS o JS
19:25 Cierre
LINKS:
🏃‍♂️ Animaciones CSS: lenguajecss.com/css/animacion...
🤖 Ejemplo de Wheatley (Portal): codepen.io/manz/pen/QXQyvb
¡No te olvides de seguirme! ⚡ manz.dev
---
📹 Twitch: / manzdev
📼 RU-vid: / manzdev
🐤 Twitter: / manz
📷 Instagram: / manz.dev
✈️ Telegram: t.me/ManzDev
🎶 Música: Portal 2 www.thinkwithportals.com/musi...

Наука

Опубликовано:

 

19 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 36   
@eliecersmora5931
@eliecersmora5931 4 месяца назад
Brutal explicacion. Gracias capo
@JOCSH-fe2bi
@JOCSH-fe2bi 2 месяца назад
ManzDev gracias por la documentacion de los lenguajes, no tenia money, pero gracias, en vex una suscripcion
@private3605
@private3605 9 месяцев назад
Te felicito!! Explicas excelente! No hay muchos que sean tan didácticos! Bendiciones
@ManzDev
@ManzDev 9 месяцев назад
¡Muchas gracias! 🚀
@THEsyntheticFresh
@THEsyntheticFresh 8 месяцев назад
Ya hace días que veo tus vídeos. Me gusta mucho como explicas. Me suscribo 👍🍻
@ManzDev
@ManzDev 8 месяцев назад
¡Muchas gracias!
@cotopaco1203
@cotopaco1203 Месяц назад
Buen video!
@xavicode3436
@xavicode3436 Год назад
buenísimo tema, excelente explicación. gracias Manz
@ManzDev
@ManzDev Год назад
¡Muchísimas gracias, Xavi! 🚀
@cerm88
@cerm88 Год назад
Excelente como simpre!
@ManzDev
@ManzDev Год назад
¡Gracias, Carlos! 🚀
@ricardohernandezmendez4207
@ricardohernandezmendez4207 Год назад
Excelente explicación, muchas gracias Maz! Me ha quedado mas claro el manejo de animaciones con css. 🚀💥
@ManzDev
@ManzDev Год назад
¡Muchísimas gracias, Ricardo! ¡Me alegro de que te haya servido de ayuda! 🚀
@adeleiminceballos
@adeleiminceballos Год назад
gracia men excelente forma de explicar
@ManzDev
@ManzDev Год назад
¡Muchísimas gracias!
@francovedia5584
@francovedia5584 7 месяцев назад
gracias genio
@ManzDev
@ManzDev 7 месяцев назад
De nada! Gracias por el comentario! ✨
@mr.fabian8471
@mr.fabian8471 Год назад
Gracias master !!
@ManzDev
@ManzDev Год назад
¡Gracias a ti, Fabian!
@rodrimarlon
@rodrimarlon 5 месяцев назад
Excelente explicación, CSS me tiene rabia y yo a CSS, es una relación difícil.
@fra92nk
@fra92nk Год назад
lo acabo de ver y flipo!! necesito empezar a animar con css!! . brou una pregunta. que tema le pones al cursor para que salgan esas chispas al picar codigo?? esta tremendo! saludos desde argentina!
@ManzDev
@ManzDev Год назад
Se llama PowerMode, puedes encontrarlo aquí, junto a otras extensiones que uso: manz.dev/software/vscode/
@anggelogomez9319
@anggelogomez9319 11 месяцев назад
como puedo hacer por ejemplo , yo pongo una animacion en una section como por ejemplo la section caracteristicas que esta abajo, y yo quiero agregarle animaciones diferentes a cada section , pero quiero que se vean cuando llegue a ese punto de la pagina, porque cuando carga la pagina se reproducen todas las animaciones asi sean las que estan mas abajo y cuando llego a ese punto no se ven, porque ya se movieron, como puedo hacer para que se reproduscan cuando llego a esa parte de la pagina?
@ManzDev
@ManzDev 11 месяцев назад
Hola Angel. Hay una especificación para hacerlo con CSS sólo, pero aún no es compatible con los navegadores. Hoy en día es muy sencillo hacerlo con librerías como AOS o similares: michalsnik.github.io/aos/
@franciscoleonardoornelassa8721
@franciscoleonardoornelassa8721 7 месяцев назад
Buen vídeo, como se hace para que el indicador de texto en visual studio code parpadee de esa forma?
@ManzDev
@ManzDev 7 месяцев назад
Hay una opción en VSCode llamada "editor.cursorBlinking", con el valor "expand" hace esa animación. Hablo de ello y otras configuraciones más en el video del final: manz.dev/software/vscode/
@nicocorzi
@nicocorzi Месяц назад
Y sin mediaQuery?
@FidelEmilioSusanaJimenez
@FidelEmilioSusanaJimenez 7 месяцев назад
👽😍😍
@ManzDev
@ManzDev 7 месяцев назад
✨🎭🎉
@jonnnymunoz724
@jonnnymunoz724 3 месяца назад
como se llama extencion que tienes en la escritura
@ManzDev
@ManzDev 3 месяца назад
Power mode!
@jonnnymunoz724
@jonnnymunoz724 3 месяца назад
@@ManzDev gracias parce
@Aureck
@Aureck Год назад
Después de este video, me veo obligada a practicar animaciones con CSS ( *procede a hacer la página de Homer* ).... I'm in space
@ManzDev
@ManzDev Год назад
* Cosas bailando en pantalla *
@tronicsluis
@tronicsluis 2 месяца назад
Dev, como te contacto? soy Z-index
@ManzDev
@ManzDev 2 месяца назад
¿Eres una propiedad CSS? 😐
Далее
Learn CSS Animations In 20 Minutes - For Beginners
21:22
¡Aprende a utilizar TRANSICIONES CSS!
10:05
Просмотров 6 тыс.
Aprende TRANSICIONES CSS en 15 MINUTOS.
13:09
Просмотров 3,9 тыс.
Animaciones en JavaScript con D3.js 📊
12:15
Просмотров 30 тыс.
Guía sobre Animaciones en CSS
12:38
Просмотров 94 тыс.
SÓLO 3 LÍNEAS: CSS Grid responsive sin media queries
10:04
Figma for Edu: Auto layout components
58:17
Просмотров 27 тыс.
TRANSICIONES en CSS | Crea Animaciones con CSS
22:56
Просмотров 93 тыс.
▶️ #11 COMO USAR "ANIMATION" 💻 Curso CSS
14:17
iPhone 12 socket cleaning #fixit
0:30
Просмотров 43 млн
ЛУЧШИЙ ПОВЕРБАНК ОТ XIAOMI
0:39
Просмотров 16 тыс.
puspa #repring #repair #cpu #mobiledevice #repair
0:13