08. Анимация в CSS. Основные свойства анимации на практике

В данном видео по CSS анимации мы рассмотрим основные свойства анимации, такие как: ----- Анимация ------ animation-name - название анимации animation-duration - продолжительность анимации animation-delay - задержка в воспроизведении animation-direction: alternate - проигрывает анимацию как вперед, так и назад; animation-fill-mode: forwards; По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями animation-direction и animation-iteration-count: animation-fill-mode: backwards Элемент сохранит стиль первого ключевого кадра на протяжении периода animation-delay. Первый ключевой кадр определяется значением animation-direction --Преобразование элемента-- transform: translate(-50%, -50%); - передвигает элемент на 50% от его ширины и высоты; --Наложение элементов--- z-index: 0; z-index: 1; z-index: 2; -- Пример Keyframes -- @keyframes move-from-top { 0%{ top: -200px; } 25%{ top:50% } 50%{ top:30% } 100%{ top: 50%; } } Документации по CSS анимации: