Из предыдущих исследований мы знаем, что с помощью атрибута перехода можно добиться простой анимации перехода, но анимация перехода может указывать только начальное и конечное состояния. Весь процесс контролируется определенной функцией, которая не очень гибкая. В этом разделе мы представим более сложную анимацию – анимацию.
Анимация. Подобно переходу, можно добиться некоторых динамических эффектов. Разница в том, что переход должен запускаться при изменении определенного атрибута, а эффекты анимации могут автоматически запускать динамические эффекты. Чтобы установить эффекты анимации, необходимо сначала установить ключевой кадр. Ключевые кадры задают каждый шаг выполнения анимации. Формат настроек ключевых кадров следующий:
<style>/*Определить ключевые кадры анимации. Имя ключевого кадра — test*/@keyframestest{/*from указывает начальную позицию анимации, которая также может быть выражена 0 %. */from{margin-left:0;}/*to указывает конечную позицию анимации, которую также можно выразить как 100%. */to{margin-left:100%;}}</style>Анимация в CSS похожа на покадровую анимацию во Flash. Она деликатна и очень гибка. Использование анимации в CSS может заменить динамические изображения, Flash-анимацию или специальные эффекты, реализованные в JavaScript на многих веб-страницах.
Анимация — это эффект постепенного изменения элемента из одного стиля в другой. Мы можем менять столько стилей, сколько захотим, и столько раз, сколько захотим (очень официальный ответ).
Свойство CSS3animation (анимация).
@keyframes
С помощью правила @keyframes мы можем создавать анимацию.
Анимации создаются путем постепенной замены одного набора стилей CSS на другой. Мы можем изменить этот набор стилей CSS несколько раз во время анимации. Укажите время, когда происходит изменение, в процентах или с помощью ключевых слов «от» и «до», которые эквивалентны 0% и 100%.
0% — время начала анимации, 100% — время окончания анимации. Для лучшей поддержки браузерами мы всегда должны определять селекторы 0% и 100%. Здесь 0% — это один кадр, 50% — это один кадр и 100% — это тоже один кадр.
Наконец, используйте свойства анимации, чтобы управлять внешним видом анимации и привязать анимацию к селектору.
Требуется имя анимации. Определяет имя анимации.
Требуется селектор ключевых кадров. Допустимые значения процента длительности анимации: 0–100 % от (то же, что 0 %) до (то же, что 100 %).
CSS-стили необходимы. Одно или несколько допустимых свойств стиля CSS.
Например:
@keyframesname{0%{top:0px;left:0px;background:red;}25%{top:0px;left:100px;background:blue;}50%{top:100px;left:100px;background:yellow; }75%{сверху:100 пикселей;слева:0px;фон:зеленый;}100%{сверху:0px;слева:0px;фон:красный;}}1. Атрибут анимация-имя: задает имя анимации, которое необходимо привязать к элементу.
Атрибут анимация-имя используется для привязки анимации к указанному элементу HTML. Необязательные значения атрибута следующие:
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position: относительный;имя-анимации:мяч;</style></head><body><div></div></body></html>Результаты запуска:
Примечание. Для успешного воспроизведения анимации вам также необходимо определить атрибут анимации-длительности. В противном случае анимация не будет воспроизводиться, поскольку значение атрибута анимации-длительности по умолчанию равно 0.
2. Атрибут анимации-длительности: определяет, сколько секунд или миллисекунд требуется анимации для завершения цикла.
● время: укажите время, необходимое для завершения анимации. Значение по умолчанию — 0, что означает отсутствие эффекта анимации.
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position: относительный;имя-анимации:шар;продолжительность анимации:2с;</style></head><body><div></div></body></html>3. функция синхронизации анимации: используемая математическая функция называется кубической кривой Безье и кривой скорости. Используя эту функцию, вы можете использовать свое собственное значение или использовать одно из предопределенных значений.
●линейный: скорость анимации одинакова от начала до конца;
●простота: по умолчанию. Анимация начинается с низкой скорости, затем ускоряется и замедляется перед завершением;
● легкость: анимация начинается на низкой скорости;
●ease-out: анимация заканчивается на низкой скорости;
● легкость выхода: анимация начинается и заканчивается на низкой скорости;
●cubic-bezier (n,n,n,n): используйте функциюcuba-bezier() для определения скорости воспроизведения анимации. Диапазон значений параметра — от 0 до 1.
4. Атрибут анимации-задержки: определяет, когда начинается анимация.
●время: необязательно. Определяет время ожидания перед запуском анимации в секундах или миллисекундах. Значение по умолчанию — 0.
Примечание. Единицей измерения может быть секунды (с) или миллисекунды (мс).
5. Атрибутanimation-iteration-count: определяет, сколько раз должна воспроизводиться анимация.
Необязательные значения атрибута следующие:
6. Атрибут анимации-направления: определяет, воспроизводить ли анимацию в обратном порядке в цикле.
●нормальный: значение по умолчанию. Анимация воспроизводится нормально;
●реверс: анимация воспроизводится в обратном порядке;
●Альтернативный: анимация воспроизводится вперед с нечетными числами (1, 2, 5...) и наоборот с четными числами (2, 4, 6...);
●Альтернативное обратное: анимация воспроизводится в обратном направлении в нечетные моменты времени (1, 3, 5...) и в прямом направлении в четные моменты времени (2, 4, 6...).
7. Атрибутanimation-fill-mode: определяет стиль, который будет применен к элементу, когда анимация не воспроизводится (когда анимация завершена или когда перед началом воспроизведения анимации есть задержка).
Примечание. По умолчанию CSS-анимация не влияет на элемент до тех пор, пока не будет воспроизведен первый ключевой кадр, и перестает влиять на элемент после завершения последнего ключевого кадра. Свойствоanimation-fill-mode переопределяет это поведение.
●нет значения по умолчанию. : анимация не будет применять стили к целевому элементу до и после выполнения анимации;
●forwards: после завершения анимации (определяется счетчиком анимаций-итераций) анимация будет применять это значение атрибута;
●Назад: анимация будет применять значения свойств, определенные в ключевом кадре, с которого началась первая итерация анимации, во время определения задержки анимации. Это значения в ключевом кадре from (когда направление анимации «нормальное» или «альтернативное») или в ключевом кадре to (когда направление анимации «обратное» или «альтернативно-обратное»);
●Обе анимации следуют правилам движения вперед и назад. То есть анимация расширяет свойство анимации в обоих направлениях.
8.animation-play-state: определяет, запущена или приостановлена анимация.
●paused: позволяет приостановить анимацию;
●бег: укажите анимацию бега.
9. начальный: установите для свойства значение по умолчанию.
●initial: ключевое слово используется для установки свойств CSS в значения по умолчанию;
●initial: ключевое слово можно использовать для любого атрибута CSS в любом элементе HTML.
10. наследовать: Наследовать атрибуты от родительских элементов.
●inherit: ключевое слово указывает, что атрибут должен наследовать свое значение от родительского элемента;
●inherit: ключевое слово можно использовать для любого атрибута CSS в любом элементе HTML.
анимация
Атрибут анимации — это аббревиатура имени анимации, продолжительности анимации, функции синхронизации анимации, задержки анимации, количества итераций анимации, направления анимации, режима заполнения анимации, состояния воспроизведения анимации, через анимацию. Атрибут может одновременно определять несколько вышеуказанных атрибутов. Формат синтаксиса следующий:
анимация:имя-анимациианимация-длительность-функция-таймингаанимация-задержкаанимация-итерация-счетчик анимации-направлениеанимация-заполнение-режим анимации-воспроизведение-состояние;
Каждый параметр соответствует каждому атрибуту, представленному выше. Если одно или несколько значений опущены, будет использоваться значение по умолчанию, соответствующее атрибуту.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Анимация</title><style>.box1{width:700px;height:500px;background-color:silver;}.box2{width :100px;height:100px;background-color:#bfa;margin-left:10px;/*animation-name:test;*//*animation-duration:4s;*//*animation-timing-function:linear; *//*animation-iteration-count:4;*//*animation-direction:alternate;*//*animation-fill-mode:backwards;*//*animation-delay:2s;*/animation:test2slinear1s4alternate; }/*Определение ключевых кадров анимации. Имя ключевого кадра — test*/@keyframestest{/*from указывает начальную позицию анимации, которая также может быть выражена 0 %. */from{margin-left:50px;background-color:orange;}/*to указывает конечную позицию анимации, которая также может быть выражена через 100%. */to{margin-left:600px;background-color:yellow;}}/*Управление запуском анимации*//*.box1:hover.box2{animation-play-state:paused;}*/</style > </head><body><div><div></div></div></body></html>