Как сделать зацикленную анимацию css

Как сделать зацикленную анимацию?

Есть блок, на нем изображение через css background-image, его нужно анимировать, чтобы картинка все время двигалась вправо, сделал такое через css анимацию вот так:

@keyframes loading < 0% < background-position: 0px; >100% < background-position: 100px; >>

animation: loading 1s infinite;

Но дергается, понятно что кейфрейм обрывается. Как исправить?

Вопрос задан более трёх лет назад
769 просмотров

Бесконечная анимация CSS

Как сделать, чтобы бесконечно вертелся блок? Сейчас такое вращение только при наведении указателя мыши.

Отслеживать
8,552 4 4 золотых знака 29 29 серебряных знаков 53 53 бронзовых знака
задан 15 янв 2018 в 15:57
2,171 4 4 золотых знака 20 20 серебряных знаков 35 35 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

div < background: red; width: 100px; height: 100px; transition: all 0.5s ease; animation: rotate 1s linear infinite; >@keyframes rotate < from < transform: rotate(360deg); >>

Отслеживать
ответ дан 15 янв 2018 в 20:01
14.5k 6 6 золотых знаков 33 33 серебряных знака 71 71 бронзовый знак

Используйте @keyframes и animation: . infinite . .

div < height: 150px; width: 150px; background: #ddd; transition: all 0.5s ease; transform: rotate(0deg) >div:hover < animation: move 0.5s infinite linear; >@keyframes move < 0% < transform: rotate(0deg); background: green; >50% < transform: rotate(180deg); border-radius: 50%; >100% < transform: rotate(360deg); background: yellow; >>

Отслеживать
ответ дан 15 янв 2018 в 16:02
13.1k 2 2 золотых знака 21 21 серебряный знак 37 37 бронзовых знаков

   Infinite rotating @keyframes infinite-auto-rotating < from < -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); >to < -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); >> @-webkit-keyframes infinite-auto-rotating /* Для Safari и Chrome */ < from < -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); >to < -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); >> div

Отслеживать
ответ дан 15 янв 2018 в 19:30
Tigran Yengoyan Tigran Yengoyan
11 3 3 бронзовых знака

css
анимация

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Сделать сайт интереснее: учимся создавать анимацию в CSS3

Цель анимации — обратить на себя внимание. Человек замечает любые движения на уровне инстинктов. Если анимация сделана на высоком уровне и гармонично вписывается в дизайн сайта, то она значительно увеличит уровень обратной связи. В нашей статье мы разберем, что такое CSS3-анимация и как ее использовать.

Курс Англійської.
Подолай мовний бар’єр та розширюй коло друзів на розмовних клубах.

Анимация отличается от стандартных CSS3-переходов. Она основывается на нескольких кадрах, которые воспроизводятся по определенным правилам и повторяются либо на протяжении определенного промежутка времени, либо циклически.

Составляющие CSS3-анимации

CSS3-анимация состоит из ключевых кадров и свойств. Кадры определяют главные этапы и стиль, а свойства представляют собой подключение анимации к элементу сайта и варианты ее запуска. Теперь давайте разберемся подробнее.

Ключевые кадры или @keyframes — основа любой анимации CSS. Они обозначают, как будет выглядеть картинка на каждом этапе времени. Каждый кадр состоит из следующих компонентов:

Курс Project Manager.

Впроваджуйте покроковий алгоритм управління проєктами вже зараз. У цьому вам допоможе Павло Харіков — Head of IoT у Veon Group (Kyivstar).

Давайте создадим самую элементарную анимацию:

@keyframes example < 0% < transform: scale(0.2); opacity: 0; >//элемент прозрачный, масштабируемость до 20 процентов 50% < transform: scale(1.5); opacity: 1; >//элемент проявляется и увеличивается до 150% 100% < transform: scale(1); >//возвращение элемента к стандартному размеру >

Еще один способ указания начального и конечного кадров — from и to , между которыми указываются проценты.

Важно! Если не указать первый и последний кадры, то браузер будет определять их автоматически, считая, что анимация для них не была задана.

Чтобы подключить класс с анимацией к элементу, можно использовать JavaScript-код, например:

element < animation-name: example; //имя для анимации animation-duration: 3s; //длительность в секундах (или миллисекундах) >

В нем мы прописываем, как и при каких условиях должна срабатывать анимация. Подобным образом можно анимировать любой элемент на странице сайта. Для этого достаточно добавить:

В сокращенной форме такой код будет выглядеть так:

Курс Англійської.
Подолай мовний бар’єр та розширюй коло друзів на розмовних клубах.

Для одного и того же элемента можно записывать сразу несколько анимаций, для этого их перечисляют через запятую в той последовательности, в которой они должны запускаться.

Свойства CSS3-анимации

Давайте познакомимся с основным перечнем свойств CSS3-анимации:

задержка;
запуск и остановка;

Помимо основных свойств анимации можно задействовать дополнительные, которые нужны для построения усложненных эффектов.

Задержка анимации: свойство animation-delay

Задержка анимации или animation-delay обозначает, сколько времени пройдет до начала воспроизведения. Свойство прописывается в секундах или миллисекундах:

element < animation-name: animation-1; animation-duration: 2s; animation-delay: 3s; // перед запуском анимации пройдет 3 секунды >

Повторное воспроизведение анимации: свойство animation-iteration-count

Повторное воспроизведение анимации записывается как animation-iteration-count . Его можно указывать в виде количества повторов анимации, например, 0 или 3 раза.

Курс Финансовый директор.
Отримайте комплексне розуміння фінансової діяльності. Час підніматись по карʼєрним сходам.

Также можно зациклить анимацию, сделав ее постоянно воспроизводящейся, для этого в свойстве прописывается infinite .

Фрагмент кода с использованием задержки и повторного воспроизведения будет выглядеть следующим образом:

element < animation-name: example; animation-duration: 3s; animation-delay: 2s; animation-iteration-count: infinite; // анимация будет зацикленной >

Состояние элемента до и после: свойство animation-fill-mode

Следующий параметр CSS3-анимации — состояние элемента до и после. Оно называется animation-fill-mode . Для него после двоеточия можно прописать следующие значения:

Для одной и той же анимации можно использовать разные состояния до и после, получая новые варианты движения.

Синтаксис будет выглядеть следующим образом:

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-play-state

Свойство запуска и остановки анимации прописывается как animation-play-state . Оно принимает лишь два основных варианта значений: running или paused . А также initial — устанавливает значение свойства в значение по умолчанию, и inherit — наследует значение от родительского элемента.

animation-play-state: running; animation-play-state: paused; animation-play-state: paused, running, running; animation-play-state: initial; animation-play-state: inherit;

Направление анимации: свойство animation-direction

Направление анимации или animation-direction определяет направление воспроизведения. Для него существует несколько возможных значений, среди которых:

normal — последовательный порядок;
alternate — четные повторы в нормальном порядке, а нечетные — в обратном;
reverse — обратный порядок;
alternate-reverse — нечетные повторы в прямом, а четные — в обратном порядке;
initial — устанавливает значение свойства в значение по умолчанию;
inherit — наследует значение от родительского элемента.

Использование разных значений для одних и тех же кадров позволит получить несколько вариантов анимации, которые будут различаться между собой.

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-timing-function и определяет скорость воспроизведения анимации. По умолчанию значения функции работают так, что анимация запускается медленно, затем увеличивает скорость и к концу вновь замедляется.

На разных этапах воспроизведения анимация имеет разную скорость

Есть несколько значений, которые вы можете использовать в коде:

linear — кадры будут сменяться равномерно на протяжении всего времени без каких-либо колебаний;
ease — значение, используемое по умолчанию, то есть сначала воспроизводится медленно, затем ускоряется и замедляется к завершению;
ease-in / ease-in-out — в первом варианте анимация запускается медленно и плавно, ускоряется к своему завершению, во втором — начинается быстро, а под конец замедляется;
step-start / step-end — значения анимации в шагах, для которых изменения запускаются в начале или в конце каждого шага.

Это стандартные значения, при необходимости вы можете создавать подобные самостоятельно. Функция принимает четыре аргумента для построения кривой распределения cubic-bezier(x1, y1, x2, y2) . В сети есть сервисы, которые позволяют попрактиковаться в создании собственных вариантов.

Анимацию также можно разделить на комбинацию численных значений, используя ступенчатую временную функцию steps , которая включает в себя количество шагов и направление движения, например:

animation-timing-function: steps(5, end);

В этом случае в анимации будет пять шагов, последний из которых осуществится прямо перед ее окончанием. Вторым параметром функции может быть одно из следующих значений:

start ;
jump-none ;
end ;
jump-both .

Они определяют момент, когда начинается анимация. Например, start означает, что анимация будет начинаться вначале шага, а при end , наоборот, в конце с определенной паузой. Используя пошаговую анимацию можно генерировать разные эффекты, такие как отображение процесса загрузки или появляющийся на экране текст.

Кроссбраузерность

CSS3-анимация отлично поддерживается всеми популярными браузерами. Но отдельные из них требуют использование префикса webkit , который нужно прописывать для ключевых кадров и свойств. В таком случае код будет иметь следующий вид:

div < -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: example; animation-name: example; >@-webkit-keyframes example < /* свойства */ >@keyframes example < /* свойства */ >

Для упрощения работы можно попробовать воспользоваться такими технологиями, как Sass, Bourbon, Less.

Заключение

Мы изучили основные этапы создания CSS3-анимации, разобрались в ее привязке к элементам, а также изучили свойства, которые можно использовать в ее составе. Пользуйтесь анимацией и делайте свои страницы живыми и интересными!

Курс С++ для GameDevData analyst.

Комплексний курс, який навчить кодити на C++ з нуля, отримай необхідні навички щоб заволодіти затребуваною мовою програмування.

Как сделать зацикленную анимацию css