Каждый современный человек владеет ноутбуком, но как самому убрать возникающие...
![Пропал звук на ноутбуке — что делать?](https://i0.wp.com/sovets.net/photos/uploads/120/8110495-2razrabotanyi-spetsialnyie-programmyi-kotoryie-testiruyut-audio-drayveryi-soundcheck.jpg)
Initial value | 0s |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
animation-delay | Chrome
Full support
43 Full support
43
Full support
3 Prefixed Prefixed | Edge Full support 12 | Firefox
Full support
16 Notes Full support 16Notes Notes Before Firefox 57, Firefox does not repaint elements outside the viewport that are animated into the viewport with a delay. This bug affects only some platforms, such as Windows. Full support 49Prefixed Prefixed Implemented with the vendor prefix: -webkit- Full support 44Prefixed Disabled Prefixed Implemented with the vendor prefix: -webkit- Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config. Full support 5Prefixed Prefixed Implemented with the vendor prefix: -moz- | IE Full support 10 | Opera
Full support
30 Full support
30
Full support
15 Prefixed Prefixed Implemented with the vendor prefix: -webkit- No support 12.1 - 15 No support 12 - 15Prefixed Prefixed Implemented with the vendor prefix: -o- | Safari
Full support
9 Full support
9
Full support
4 Prefixed Prefixed Implemented with the vendor prefix: -webkit- | WebView Android
Full support
43 Full support
43
Full support
≤37 Prefixed Prefixed Implemented with the vendor prefix: -webkit- | Chrome Android
Full support
43 Full support
43
Full support
18 Prefixed Prefixed Implemented with the vendor prefix: -webkit- | Firefox Android Full support 16 Full support 16 Full support 49 |
Heres маленький фрагмент, который показывает то же самое в 75% случаев, затем он скользит. Эта повторяющаяся схема хорошо эмулирует задержку:
@-webkit-keyframes slide { 0% {background-position: 0 0;} 25% {background-position: 0 0;} 50% {background-position: 0 0;} 75% {background-position: 0 0;} 100% {background-position: 13em 0;} } @-moz-keyframes slide { 0% {background-position: 0 0;} 25% {background-position: 0 0;} 50% {background-position: 0 0;} 75% {background-position: 0 0;} 100% {background-position: 13em 0;} } @keyframes slide { 0% {background-position: 0 0;} 25% {background-position: 0 0;} 50% {background-position: 0 0;} 75% {background-position: 0 0;} 100% {background-position: 13em 0;} }
Недавно я обнаружил, как «правильно» использовать анимации CSS (ранее я отклонил их как неспособные создавать сложные последовательности, как вы могли бы в JavaScript). Итак, теперь я узнаю о них.
Для этого эффекта я стараюсь, чтобы градиентная «вспышка» охватывала элемент, похожий на прогресс. Аналогично влиянию на собственные индикаторы выполнения Windows Vista / 7.
@keyframes barshine { from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);} } .progbar { animation: barshine 1s 4s linear infinite; }
Как вы можете видеть, я пытаюсь получить задержку в 4 секунды, за которой следует блеск, проходящий через 1 секунду, повторяющийся.
Однако кажется, что animation-delay применима только к первой итерации, после чего блеск просто продолжает размахивать.
Я «решил» этот вопрос следующим образом:
@keyframes expbarshine { from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} 80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);} to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);} } .progbar { animation: barshine 5s linear infinite; }
from и 80% точно такие же, что приводит к «задержке» 80% длины анимации.
Это работает, но для моей следующей анимации мне нужно, чтобы задержка была переменной (константа для определенного элемента, но переменная среди элементов, использующих анимацию), в то время как сама анимация остается той же длины.
С приведенным выше «решением», я получаю более медленную анимацию, когда все, что я хочу, - это более длительная задержка.
Возможно ли, чтобы animation-delay применялась ко всем итерациям, а не только к первой?
minitech прав в том, что animation-delay указывает задержку до начала анимации и НЕ задержка между итерациями. Редактор проекта спецификации описывает это хорошо, и здесь обсуждалась эта функция, которую вы описываете которая предлагает эту функцию задержки итерации.
Хотя в JS может быть обходной путь, вы можете подделать эту итерационную задержку для вспышки индикатора выполнения, используя только CSS.
Объявляя положение деления факела position:absolute и overflow: hidden родительского div overflow: hidden , устанавливая 100-процентное состояние ключевого кадра больше, чем ширина индикатора выполнения, и играя с функцией времени кубического безье и значениями смещения слева, вы можете для эмуляции режима легкого ease-in-out или linear времени с «задержкой».
Было бы интересно написать меньше / scss mixin, чтобы точно рассчитать функцию смещения влево и времени, чтобы получить это точно, но сейчас у меня нет времени, чтобы играть с ним. Хотелось бы увидеть что-то подобное!
Вот демо, которое я собрал вместе, чтобы показать это. (Я попытался подражать индикатору выполнения Windows 7 и немного упал, но он демонстрирует, о чем я говорю)
/* CSS */ @keyframes progress { from { width: 0px; } to { width: 600px; } } @keyframes barshine { 0% { left: -100px; } 100% { left: 1000px; } } .flare { animation-name: barshine; animation-duration: 3s; animation-direction: normal; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.14, .75, .2, 1.01); animation-iteration-count: infinite; left: 0; top: 0; height: 40px; width: 100px; position: absolute; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%, rgba(255,255,255,0) 87%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.69)), color-stop(87%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,255,0.69) 0%,rgba(255,255,255,0) 87%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b0ffffff", endColorstr="#00ffffff",GradientType=1); /* IE6-9 fallback on horizontal gradient */ z-index: 10; } .progress { animation-name: progress; animation-duration: 10s; animation-delay: 1s; animation-timing-function: linear; animation-iteration-count: infinite; overflow: hidden; position:relative; z-index: 1; height: 100%; width: 100%; border-right: 1px solid #0f9116; background: #caf7ce; /* Old browsers */ background: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#caf7ce), color-stop(18%,#caf7ce), color-stop(45%,#3fe81e), color-stop(96%,#2ab22a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* IE10+ */ background: linear-gradient(to bottom, #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#caf7ce", endColorstr="#2ab22a",GradientType=0); /* IE6-9 */ } .progress:after { content: ""; width: 100%; height: 29px; right: 0; bottom: 0; position: absolute; z-index: 3; background: -moz-linear-gradient(left, rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(202,247,206,0) 0%,rgba(42,178,42,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00caf7ce", endColorstr="#2ab22a",GradientType=1); /* IE6-9 */ } .bar { margin-top: 30px; height: 40px; width: 600px; position: relative; border: 1px solid #777; border-radius: 3px; }
У меня была аналогичная проблема и я использовал
@-webkit-keyframes pan { 0%, 10% { -webkit-transform: translate3d(0%, 0px, 0px); } 90%, 100% { -webkit-transform: translate3d(-50%, 0px, 0px); } }
Бит раздражает, что вы должны подделывать свою продолжительность, чтобы учесть «задержки» с обоих концов.
Это то, что вы должны делать. Он должен работать так, что у вас есть анимация за 1 секунду, а затем 4-секундная задержка между итерациями:
@keyframes barshine { 0% { background-image:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%); } 20% { background-image:linear-gradient(120deg,rgba(255,255,255,0) 10%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%); } } .progbar { animation: barshine 5s 0s linear infinite; }
Поэтому я много общался с этим, и вы можете сделать это, не будучи очень взломанным. Это самый простой способ установить задержку между итерациями анимации: 1. SUPER EASY и 2. просто требует немного логики. Посмотрите эту танцевальную анимацию, которую я сделал:
Dance{ animation-name: dance; -webkit-animation-name: dance; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; -webkit-animation-delay: 2.5s; animation-delay: 2.5s; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; } @keyframes dance { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 50% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes dance { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 20% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } 40% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 60% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 80% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 95% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } }
Я на самом деле приехал сюда, пытаясь понять, как задержать анимацию, когда я понял, что вы просто 1. продлеваете продолжительность анимации и набираете пропорцию времени для каждой анимации. Beore Я имел их каждый длительностью 0,5 секунды на общую продолжительность 2,5 секунды. Теперь позвольте сказать, что я хотел добавить задержку, равную общей длительности, поэтому задержка 2,5 секунды.
Время анимации составляет 2,5 секунды, а задержка - 2,5, поэтому вы изменяете продолжительность до 5 секунд. Однако, поскольку вы удвоили общую продолжительность, вам нужно уменьшить вдвое долю анимации. Проверьте последнее ниже. Это отлично сработало для меня.
@-webkit-keyframes dance { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 10% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } 20% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 30% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate(-120deg); } 50% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } }
Это ваши расчеты, которые вы, вероятно, используете, чтобы выяснить, как изменить продолжительность анимации и% каждой части.
wish_duration = x
wish_duration = animation_part_duration1 + animation_part_duration2 + ... (и так далее)
общая продолжительность = x + y
animation_part_duration1_actual = animation_part_duration1 * wish_duration / total_duration
Я сделал плакат на стене, который перемещается влево и вправо с интервалами. Для меня это работает:
Div-animation { -webkit-animation: bounce 2000ms ease-out; -moz-animation: bounce 2000ms ease-out; -o-animation: bounce 2000ms ease-out; animation: bounce 2000ms ease-out infinite; -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; transform-origin: 55% 10%; } @-webkit-keyframes bounce { 0% { transform: rotate(0deg); } 3% { transform: rotate(1deg); } 6% { transform: rotate(2deg); } 9% { transform: rotate(3deg); } 12% { transform: rotate(2deg); } 15% { transform: rotate(1deg); } 18% { transform: rotate(0deg); } 21% { transform: rotate(-1deg); } 24% { transform: rotate(-2deg); } 27% { transform: rotate(-3deg); } 30% { transform: rotate(-2deg); } 33% { transform: rotate(-1deg); } 36% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.
Обязательное условие - наличие конкретных значений. Свойства со значением auto не анимируются.
Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами
Пример Css-анимации:
Пример кода анимации:
@keyframes move { 40% { left: 50%; bottom: 75%; animation-timing-function: ease-in; } 80% { left: 90%; bottom: -10em; } }
Подключение анимации:
Sun { animation: move 15s infinite linear; }
move - имя анимации 15s - длительность infinite - бесконечное повторение linear - тип движения
Сама анимация задается внутри блока @keyframes . После @keyframes задается имя анимации, а потом внутри фигурных скобок - её шаги.
Шаги можно задавать через проценты или с помощью ключевых слов from и to . При этом в шагах можно менять тип анимации (animation-timing-function):
Используется для задания имени анимации.
Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.
animation-name: move; - одна анимация. animation-name: move, sun-color; - две анимации, имена задаются через запятую.
Длительностью анимации управляет свойство animation-duration .
Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение - 0s.
Свойство определяет тип анимации.
Возможные значения:
Плавная анимация ease - скольжение (значение по умолчанию) linear - ровное движение ease-in - ускорение к концу ease-out - ускорение в начале ease-in-out - более плавное скольжение, чем ease
cubic-bezier(число,число,число,число) позволяет задавать сложный тип анимации. Значения удобно подбирать на cubic-bezier.com .
cubic-bezier(.24,1.49,.29,-0.48);
Пошаговая анимация step-start и step-end - позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с step-start изменения происходят в начале шага, а с step-end - в конце.
step-end . Если выставить step-start , счетчик будет начинаться с единиц.
steps(число) - позволяет задать количество шагов, за которые будет выполнена анимация, при этом можно задать только последний шаг без необходимости указывать промежуточные.
Управляет повторением анимации. Значение по умолчанию: 1 (анимация проигрывается один раз).
Возможные значения:
число - сколько раз проиграть анимацию. infinite - бесконечное повторение.
Отвечает за направление анимации.
Возможные значения:
normal - анимация проигрывается в обычном направлении, с начала и до конца. reverse - анимация проигрывается в обратном направлении, то есть с конца. alternate - анимация проигрывается с начала и до конца, а затем в обратном направлении. alternate-reverse - анимация проигрывается с конца до начала, а затем в обратном направлении.
Управляет остановкой и проигрыванием анимации.
Возможные значения: running - анимация проигрывается (значение по умолчанию). paused - анимация застывает на первом шаге.
Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по:hover:
С помощью animation-delay можно задавать задержку анимации перед началом воспроизведения.
Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение - 0s.
Свойство определяет будет ли анимация воздействовать на элемент вне времени воспроизведения анимации.
Возможные значения:
none - анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние. forwards - анимация воздействует на элемент по окончании воспроизведения. backwards - анимация воздействует на элемент до начала воспроизведения. both - анимация воздействует на элемент и до начала, и после окончания воспроизведения.
Чтобы увидеть как backwards и both работают до начала воспроизведения анимации, задана задержка animation-delay: 3s; . Так же для этого имеет смысл открыть пример в новом окне.
Все эти свойства можно записать с помощью короткой записи, например:
Animation: timing 5s infinite alternate;
Обязательные значения - имя анимации и длительность. Первое временное значение считается длительностью воспроизведения, второе - задержкой.
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов:before и:after . Список анимируемых свойств приведен на странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: —
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44
Ключевые кадры используются для указания значений свойств анимации в различных точках анимации. Ключевые кадры определяют поведение одного цикла анимации; анимация может повторяться ноль или более раз.
Ключевые кадры указываются с помощью правила @keyframes , определяемого следующим образом:
@keyframes имя анимации { список правил }
Создание анимации начинается с установки ключевых кадров правила @keyframes . Кадры определяют, какие свойства на каком шаге будут анимированы. Каждый кадр может включать один или более блоков объявления из одного или более пар свойств и значений. Правило @keyframes содержит имя анимации элемента, которое связывает правило и блок объявления элемента.
@keyframes shadow { from {text-shadow: 0 0 3px black;} 50% {text-shadow: 0 0 30px black;} to {text-shadow: 0 0 3px black;} }
Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:
@keyframes move { from, to { top: 0; left: 0; } 25%, 75% {top: 100%;} 50% {top: 50%;} }
Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства.
Если несколько правил @keyframes определены с одним и тем же именем, сработает последнее в порядке документа, а все предыдущие проигнорируются.
После объявления правила @keyframes , мы можем ссылаться на него в свойстве animation:
H1 { font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out; }
Не рекомендуется анимировать нечисловые значения (за редким исключением), так как результат в браузере может быть непредсказуемым. Также не следует создавать ключевые кадры для значений свойств, не имеющих средней точки, например, для значений свойства color: pink и color: #ffffff , width: auto и width: 100px или border-radius: 0 и border-radius: 50% (в этом случае правильно будет указать border-radius: 0%).
Правило стиля ключевого кадра также может объявлять временную функцию, которая должна использоваться при перемещении анимации к следующему ключевому кадру.
Пример
@keyframes bounce { from { top: 100px; animation-timing-function: ease-out; } 25% { top: 50px; animation-timing-function: ease-in; } 50% { top: 100px; animation-timing-function: ease-out; } 75% { top: 75px; animation-timing-function: ease-in; } to { top: 100px; } }
Пять ключевых кадров указаны для анимации с именем «bounce». Между первым и вторым ключевым кадром (то есть между 0% и 25%) используется функция замедления. Между вторым и третьим ключевым кадром (то есть между 25% и 50%) используется функция плавного ускорения. И так далее. Элемент будет перемещаться вверх по страницу на 50px , замедляясь по мере того, как он достигает своей наивысшей точки, а затем ускоряясь, когда он падает до 100px . Вторая половина анимации ведет себя аналогичным образом, но только перемещает элемент на 25px вверх по странице.
Временная функция, указанная в ключевом кадре to или 100% , игнорируется.
Свойство animation-name определяет список применяемых к элементу анимаций. Каждое имя используется для выбора ключевого кадра в правиле, которое предоставляет значения свойств для анимации. Если имя не соответствует ни одному ключевому кадру в правиле, нет свойств для анимации, отсутствует имя анимации, анимация не будет выполняться.
Если несколько анимаций пытаются изменить одно и то же свойство, то выполнится анимация, ближайшая к концу списка имен.
Имя анимации чувствительно к регистру, не допускается использование ключевого слова none . Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, перечисленных через дефис - или символ нижнего подчеркивания _ .
Свойство не наследуется.
Синтаксис
Animation-name: none; animation-name: test-01; animation-name: -sliding; animation-name: moving-vertically; animation-name: test2; animation-name: test3, move4; animation-name: initial; animation-name: inherit;
Свойство animation-duration определяет продолжительность одного цикла анимации. Задаётся в секундах s или миллисекундах ms . Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую.
Свойство не наследуется.
Синтаксис
Animation-duration: .5s; animation-duration: 200ms; animation-duration: 2s, 10s; animation-duration: 15s, 30s, 200ms;
Свойство animation-timing-function описывает, как будет развиваться анимация между каждой парой ключевых кадров. Во время задержки анимации временные функции не применяются.
Свойство не наследуется.
animation-timing-function | |
---|---|
Значения: | |
linear | Линейная функция, анимация происходит равномерно на протяжении всего времени, без колебаний в скорости. |
функции Безье | |
ease | Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1) . |
ease-in | Анимация начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1) . |
ease-out | Анимация начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1) . |
ease-in-out | Анимация медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1) . |
cubic-bezier(x1, y1, x2, y2) | Позволяет вручную установить значения от 0 до 1. вы сможете построить любую траекторию скорости изменения анимации. |
пошаговые функции | |
step-start | Задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Вычисляется в steps(1, start) . |
step-end | Пошаговая анимация, изменения происходят в конце каждого шага. Вычисляется в steps(1, end) . |
steps(количество шагов,положение шага) | Ступенчатая временная функция, которая принимает два параметра. Первый параметр указывает количество интервалов в функции. Это должно быть положительное целое число больше 0 , если вторым параметром не является jump-none — в этом случае оно должно быть положительным целым числом больше 1 . Второй параметр, который является необязательным, указывает позицию шага — момент, в котором начинается анимация, используя одно из следующих значений:
Со значением start анимация начинается в начале каждого шага, со значением end - в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end . |
initial | |
inherit |
Синтаксис
Animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: initial; animation-timing-function: inherit;
С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки.
Свойство animation-iteration-count указывает, сколько раз проигрывается цикл анимации. Начальное значение 1 означает, что анимация будет воспроизводиться от начала до конца один раз. Это свойство часто используется в сочетании со значением alternate свойства animation-direction , которое заставляет анимацию воспроизводиться в обратном порядке в альтернативных циклах.
Свойство не наследуется.
Синтаксис
Animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.5; animation-iteration-count: 2, 0, infinite;
Свойство animation-direction определяет, должна ли анимация воспроизводиться в обратном порядке в некоторых или во всех циклах. Когда анимация воспроизводится в обратном порядке, временные функции также меняются местами. Например, при воспроизведении в обратном порядке функция ease-in будет вести себя как ease-out .
Свойство не наследуется.
animation-direction | |
---|---|
Значения: | |
normal | Все повторы анимации воспроизводятся так, как указано. Значение по умолчанию. |
reverse | Все повторы анимации воспроизводятся в обратном направлении от того, как они были определены. |
alternate | Каждый нечетный повтор цикла анимации воспроизводятся в нормальном направлении, каждый четный повтор воспроизводится в обратном направлении. |
alternate-reverse | Каждый нечетный повтор цикла анимации воспроизводятся в обратном направлении, каждый четный повтор воспроизводится в нормальном направлении. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Чтобы определить, является ли повтор цикла анимации четной или нечетной — количество повторов начинается с 1 .
Синтаксис
Animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; animation-direction: initial; animation-direction: inherit;
Свойство animation-play-state определяет, будет ли анимация запущена или приостановлена. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние:hover .
Свойство не наследуется.
Синтаксис
Animation-play-state: running; animation-play-state: paused; animation-play-state: paused, running, running; animation-play-state: initial; animation-play-state: inherit;
Свойство animation-delay определяет, когда анимация начнется. Задается в секундах s или миллисекундах ms .
Свойство не наследуется.
Синтаксис
Animation-delay: 5s; animation-delay: 3s, 10ms;
Свойство animation-fill-mode определяет, какие значения применяются анимацией вне времени ее выполнения. Когда анимация завершается, элемент возвращается к своих исходным стилям. По умолчанию анимация не влияет на значения свойств, когда анимация применяется к элементу — animation-name и animation-delay . Кроме того, по умолчанию анимация не влияет на значения свойств после ее завершения — animation-duration и animation-iteration-count . Свойство animation-fill-mode может переопределить это поведение.
Свойство не наследуется.
animation-fill-mode | |
---|---|
Значения: | |
none | Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации. |
forwards | После того, как анимация заканчивается (как определено значением animation-iteration-count), анимация будет применять значения свойств к моменту окончания анимации. Если animation-iteration-count больше нуля, применяются значения для конца последней завершенной итерации анимации (а не значения для начала итерации, которое будет следующим). Если значение animation-iteration-count равно нулю, применяемыми значениями будут те, которые начнут первую итерацию (так же, как и в режиме animation-fill-mode: backwards;). |
backwards | В течение периода, определенного с помощью animation-delay , анимация будет применять значения свойств, определенные в ключевом кадре, которые начнут первую итерацию анимации. Это либо значения ключевого кадра from (когда animation-direction: normal или animation-direction: alternate), либо значения ключевого кадра to (когда animation-direction: reverse или animation-direction: alternate). |
both | Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации. |
Синтаксис
Animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;
Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay .
Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую:
Div {animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;}