CSS - один из самых эффективных способов сделать веб-страницу интерактивной. Он меняет внешний вид наших основных веб-страница. Одна из важных и захватывающих функций, которые предлагает CSS, - это то, что он позволяет нам выполнять анимацию. Это позволяет нам перемещать элементы на нашей странице. Давайте начнем наше путешествие по анимации в CSS в следующем порядке:
Анимации в CSS
Добавление анимации на наш сайт - отличный способ привлечь внимание пользователей. Это не только увеличивает ценность нашей страницы, но и улучшает взаимодействие с пользователем. Анимация в CSS состоит из двух частей. Они есть
- Ключевые кадры
- Анимация
Анимация CSS поддерживается во всех браузерах. Однако некоторые старые браузеры, такие как Safari (до версии 8.0), требуют префикса (-webkit-) для интерпретации свойств анимации. Например:
.anim {высота: 200 пикселей ширина: 200 пикселей фон: голубой положение: относительный радиус границы: 100% -webkit-animation-name: cssanim / * старые браузеры * / -webkit-animation-duration: 5s / * старые браузеры * / анимация -name: cssanim animation-duration: 5s} / * старые браузеры * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Мы можем использовать образец html-страницы сверху и заменить код CSS в теге стиля, чтобы опробовать дальнейшие примеры.
Ключевые кадры в CSS
Это строительный блок анимации в CSS. Он используется для определения конкретных моментов и стилей анимации на нашей веб-странице. Другими словами, когда мы указываем @keyframes внутри нашего CSS, он получает элемент управления для изменения текущего состояния на новое состояние или анимации объектов на определенное время.
@Keyframes должны иметь определенные свойства для управления анимацией, такие как имя анимации, этапы и свойства.
имя - Каждой анимации должно быть присвоено имя, описывающее ее поведение.
Этапы - Сцена представляет собой завершение анимации. Это может быть обозначено как ключевыми словами «to» и «from», так и в процентах, где 0% представляет начальное состояние, а 100% представляет конечное состояние анимации. Преимущество использования процентного представления заключается в том, что мы можем определить несколько промежуточных этапов между ними, то есть каким должно быть поведение анимации на этапе 50% или 75% и т. Д.
Свойства - Эти свойства дают нам контроль над @keyframes, чтобы управлять ими во время анимации.
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {transform: scale (0.5) opacity: 0} 50 % {transform: scale (1.5) opacity: 1} 100% {transform: scale (1)}}Теперь, когда у нас есть четкое представление об определении ключевых кадров. Давайте исследуем свойства анимации, чтобы описать, как анимировать наши элементы и объекты. Два свойства, то есть наследование и начальное, можно использовать со всеми типами анимации. Эти свойства обычно используются вместе с тегом div для различного поведения.
начальная: Устанавливает для этого свойства значение по умолчанию.
наследовать: Наследует это свойство от своего родительского элемента.
Свойства анимации
- имя-анимации
Он определяет имя анимации, которая используется в @keyframes для управления.Возможные значения:
- имя: Это определяет имя для привязки к ключевому кадру для анимации.
- никто: Это значение по умолчанию, которое может использоваться для переопределения унаследованной или каскадной анимации.
Синтаксис:
имя-анимации: имя | нет | начальная | наследовать
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- продолжительность анимации
Он определяет время, необходимое анимации для выполнения одного выполнения. Он определяется в секундах или миллисекундах (например, 4 или 400 мс). Значение этого свойства по умолчанию - 0, поэтому, если это свойство не указано, анимация не будет выполняться.
Синтаксис:
продолжительность анимации: время
.anim {height: 200px width: 200px background: blue position: relative border-radius: 100% animation-name: cssanim animation-duration: 4s} @keyframes cssanim {0% {transform: scale (0.4) opacity: 0} 50 % {transform: scale (1.4) opacity: 1} 100% {transform: scale (1)}}- анимация-задержка
Свойство animation-delay позволяет нам указать задержку анимации. Он определяет, когда начнется выполнение анимационной последовательности.
Значение этого свойства может быть объявлено в секундах (с) или миллисекундах (мс). Он может содержать как положительные, так и отрицательные значения. Положительное значение указывает, что анимация начнется по истечении указанного времени и до тех пор не будет анимирована. С другой стороны, отрицательное значение немедленно запустит анимацию с точки, как если бы она уже выполнялась в течение указанного периода времени.
Синтаксис:
анимация-задержка: время
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 4s animation-delay: 4s} @keyframes cssanim {0% {left: 0px} 100% {left: 250px}}- количество итераций анимации
Это свойство указывает, сколько раз следует воспроизвести последовательность анимации. Значение по умолчанию для этого свойства - 1.Возможные значения:
- количество - обозначает количество итераций
- бесконечный - указывает, что анимация должна повторяться вечно
Синтаксис:
количество итераций анимации: число | бесконечный
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: 4} @keyframes cssanim {0% {left: 0px} 100% {left: 100px}}- анимация-направление
Он определяет направление анимации. Направление элемента можно настроить на воспроизведение вперед, назад или чередование циклов.Значение этого свойства по умолчанию - нормальное, и оно сбрасывается в каждом цикле.Возможные значения:
нормальный - Это поведение по умолчанию, и анимация воспроизводится вперед. После каждого цикла анимация возвращается в исходное состояние и снова воспроизводится вперед.
обеспечить регресс - Анимация воспроизводится в обратном направлении. После каждого цикла анимация переходит в конечное состояние и воспроизводится в обратном направлении.
чередовать - Направление анимации меняется на противоположное, то есть сначала она воспроизводится вперед, а затем назад в каждом цикле. Каждый нечетный цикл отображает прямую анимацию, а каждый четный цикл отображает движение назад.
альтернативно-обратный - Направление анимации попеременно меняется. Здесь анимация сначала воспроизводится в обратном направлении, а затем вперед в каждом цикле. Каждый нечетный цикл перемещается назад или назад, а каждый четный цикл отображает прямую анимацию.
Синтаксис:
php превратить строку в массив
направление анимации: нормальное | обратный |альтернативный | альтернативно-обратный
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-iteration-count: infinite} @keyframes cssanim {0% {left: 0px} 100% {left: 100px}}- функция времени анимации
Это свойство определяет кривую скорости или стиль движения анимации. Он предназначен для плавного перехода от одной формы к другой в стиле анимации. Если значение не присвоено, по умолчанию используется легкость.Возможные значения для функции-времени-анимации:
легкость - Это значение свойства по умолчанию. Здесь анимация начинается медленно, постепенно становится быстрой в середине, а затем снова заканчивается медленно.
линейный - Анимация сохраняет одинаковую скорость на протяжении всего цикла, то есть от начала до конца.
легкость в - Анимация начинается медленно.
облегчение - Анимация медленно заканчивается.
легкость входа - Анимация движется медленно как в начале, так и в конце.
кубическая Безье (п, п, п, п) - Эта расширенная функция позволяет нам создавать настраиваемую функцию времени, определяя наши собственные значения. Возможное значение варьируется от 0 до 1.
Синтаксис:
временная функция анимации: линейная | легкость | легкость выхода | легкость в использовании | легкость установки |кубическая Безье (п, п, п, п)
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-direction: reverse} @keyframes cssanim {0% {background: orange left: 0px } 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}- режим заливки анимации
Это особое свойство, так как оно определяет стиль анимации до или после воспроизведения анимации.По умолчанию на стиль элемента не влияет анимация до начала или после ее окончания. Это свойство полезно, поскольку помогает переопределить поведение анимации по умолчанию.Следующие возможные значения свойства animation-fill-mode:
никто - Это значение свойства по умолчанию, то есть стили анимации не применяются к элементу до или после анимации.
вперед - Стили сохраняются в элементе в финальной последовательности анимации, т.е. после завершения анимации.
назад - Стили сохраняются элементом в исходной последовательности анимации, то есть до того, как анимация будет запущена, особенно во время задержки анимации.
и то и другое - Это означает, что анимация будет следовать в обоих направлениях, т.е. вперед и назад.
Синтаксис:
режим-заливки-анимации: нет | нападающие | назад | и то и другое
.anim {width: 50px height: 50px background: lightblue color: white font-weight: bold position: relative animation-name: cssanim animation-duration: 5s animation-iteration-count: infinite border-radius: 100%} # anim1 { анимация-тайминговая-функция: легкость} # anim2 {анимация-тайминга-функция: линейная} # anim3 {анимация-тайминговая-функция: легкость-в} # anim4 {анимация-тайминг-функция: легкость} # anim5 {анимация- функция тайминга: easy-in-out} @keyframes cssanim {from {left: 0px} to {left: 400px}}- состояние воспроизведения анимации
Это свойство указывает, что анимация находится в состоянии воспроизведения или паузы. Кроме того, когда анимация возобновляется из паузы, она начинается с того места, где она была остановлена.Возможные значения:
- играть - Для рендеринга анимации при беге
- приостановлено - Для рендеринга анимации в состоянии паузы.
Синтаксис:
состояние воспроизведения анимации: приостановлено | играть
.anim {width: 100px height: 100px background: lightblue position: relative animation-name: cssanim animation-duration: 3s animation-delay: 2s animation-fill-mode: backwards border-radius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- анимация
Это известно как сокращенное свойство анимации. Он используется для более чистого кода. Когда мы привыкнем ко всем свойствам анимации, рекомендуется использовать сокращение анимации для более быстрого кодирования и определения всех свойств в одной строке.
Синтаксис:
анимация: [название-анимации] | [продолжительность анимации] | [функция-время-анимация] |[задержка анимации] | [количество итераций анимации] | [направление анимации] |[режим заливки-анимации] | [состояние воспроизведения анимации]
Все эффекты анимации, которые мы показываем выше с использованием различных свойств анимации, могут быть достигнуты с помощью сокращенияанимация свойство.
.anim {height: 200px width: 200px background: lightblue position: relative border-radius: 100% animation-name: cssanim animation-duration: 2s animation-direction: normal animation-play-state: paused} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}На этом завершаются все свойства анимации, которые можно использовать в CSS. Мы должны попробовать разные варианты этих свойств, чтобы получить более четкую картину. Когда мы освоимся, сокращенное свойство анимации может очень помочь в написании более чистого и быстрого кода. Это один из важных навыков CSS для веб-разработчиков. Поскольку мы склонны больше сосредотачиваться на движущихся объектах, а не на статических, анимация может помочь нам в этом, а также разработать отличные замечательные веб-страницы.
Ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и реальный проектный опыт. Это обучение позволит вам овладеть навыками работы с серверными и интерфейсными веб-технологиями. Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев блога «Анимация в CSS», и мы свяжемся с вами.