CSS АНИМАЦИЯ для новичков. HTML уроки. ПРАКТИКА

Привет!📢

В этом уроке я рассказываю про CSS анимацию.
Покажу вам два примерно с использованием свойства transition и правила @keyframes.
В первом примере сделаем с вами анимированную панель, которая выезжает из верхней границы экрана (bar).
Во втором примере сделаем квадрат которые непрерывно двигается по кругу и при этом меняет цвета и свою форму.

Если слова HTML и CSS вас пугают, то рекомендую посмотреть перед этим вот два видео:
НЕ СОМНЕВАЙТЕСЬ И РАЗВИВАЙТЕСЬ! У ВАС ВСЁ ПОЛУЧИТСЯ! :)
Желаю приятного обучения! 🔥

Тайминг
00:00 - Начало. Примеры;
01:19 - Подготовка документов;
02:58 - Первая анимация. Transition;
07:20 - Первая анимация. Keyframes;
10:06 - Вторая анимация. Keyframes;
13:25 - Вторая анимация. Изменение формы;

📢 Автор видеоурока: Дмитрий Колотильщиков

[dmitry_kolotilshikov]

Тайминг
00:00 - Начало. Примеры;
01:19 - Подготовка документов;
02:58 - Первая анимация. Transition;
07:20 - Первая анимация. Keyframes;
10:06 - Вторая анимация. Keyframes;
13:25 - Вторая анимация. Изменение формы;

[belovedbee]

Я ВСЁ ЧЁТКО ПОНЯЛ ДАЖЕ МОЙ УЧИТЕЛЬ ТАК НЕ ОБЕСНЯЕТ СПОСИБО 👌

[ygruumb]

Привет, ты один из лучших кого я видел! Продолжай снимать!

[cemxabalob]

Привет! Очень и очень хорошо, что есть такие люди, Дмитрий, Вы, молодец !!!

[VH-ccov]

бро, твои видосы огонь!
никогда не пишу комменты, но твой контент не могу оставить в стороне
все понятно, просто и по сути)
(отдельный + тебе за то что объясняешь свои действия, показываешь какие клавиши нажимаешь)
подписка однозначно🔥🔥

[Lyoon]

не знаю что сказать.
просто супер.
все мои лайки, подписки твои.

[DmitriNesterov]

Очень хорошо видно чёрную рамку вокруг белого прямоугольника, если у тебя рамка телевизора черная, когда Вы на неё указываете курсором 🎉 Пушка! Спасибо :-)

[Singularity]

Отличное видео! За 15минут объяснил то, что не смогли объяснить за 3 часа.

[duekwfd]

Понятная подача материала, подписка, лайк, спасибо.

[t.i.i]

Спасибо тебе большое бро, я узнал то что мне нужно!

[fade]

спасибо вам огромное! я сидел на уроке невнимательным и пропустил все эти моменты а мне в домашке задали анимации я уж думал что же мне делать теперь

[xzetxp]

Спасибо за урок, теберь верстка будет намного красивее:-)

[sergejchap]

Отличный урок. Спасибо.
Пример с анимацией квадрат-круг-квадрат интересно дополнить изменяемым содержимым этого объекта, а не одного цвета. Интересная идея.

[bobururinov]

Ну братан ты ваабще красавчик ты всё прекрасно обьесняещь удачи тебе 😎🤩😍😇

[noobsslayer]

Ты мне заменил 2-х часовой ролик о стилизации.

[grigorbalyan]

Где новые видеоролики два день уже сижу смотрю и смотрю всё это.

[galaktik]

Здравствуйте можете сказать какие у вас установлены расширения на vscode?

[a.bondaar]

Все очень понятно но есть проблема приложение не показывет форму border-bottom хотя ошибок нигде нет

[zgcfhus]

Музыка вступления та же, что и на канал и "Новости сверх державы"

[The-Facts-]

Что нужно сделать чтобы этот квадрат остановился в сентре