С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
81 / 40 / 22
Регистрация: 03.05.2013
Сообщений: 722

Проигрывание анимации до полного цикла

01.02.2017, 21:49. Показов 1088. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Подскажите, как сделать анимацию так, что бы она не перезапускалась с начала пока не завершит полный цикл?
CSS
1
2
3
4
5
6
7
8
9
10
11
@keyframes circle {
    from { transform:rotate(-360deg); }
    to { transform:rotate(0deg); }
}
 
 
.header_aircraft:hover {
    line-height:1;
    animation: circle 3s linear 1;
    transform-origin:50% 100px;
}
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
01.02.2017, 21:49
Ответы с готовыми решениями:

Плавное проигрывание анимации при скроллинге вниз на чистом JS
Народ, разработал Landing Page, сделал под каждый элемент разнообразные анимации, дело в том, что их проигрывание начинается сразу после...

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

Как сделать управляемое проигрывание анимации gif?
Как сделать управляемое проигрывание анимации gif? Если конкретнее, есть div с gif, хочется при наведении на другой div запускать у...

2
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
01.02.2017, 23:32
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .block{
      width:100px;
      height: 100px;
      background-color:tomato;
    }
    .anim{
      animation: circle 3s linear 1;
    }
    @keyframes circle {
        from { transform:rotate(-360deg); }
        to { transform:rotate(0deg); }
    }
  </style>
</head>
 
<body>
  <div class="block" id="block"></div>
 
  <script>
    var block = document.getElementById('block');
    block.addEventListener('mouseover', function(){
    block.classList.add('anim');
  })
    block.addEventListener("animationend", function(){
    block.classList.remove('anim');
  });
  </script>
</body>
 
</html>
1
81 / 40 / 22
Регистрация: 03.05.2013
Сообщений: 722
02.02.2017, 10:03  [ТС]
спасибо, разобрался, работает.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
02.02.2017, 10:03
Помогаю со студенческими работами здесь

Проигрывание анимации
Как в последней версии Unity при определённом условии проиграть анимацию объекта?

Проигрывание анимации JS
Привет! В юнити я новичок, поэтому не карайте сильно! К сути проблемы: Начал разрабатывать собственный MoveController и дошел до того,...

Проигрывание анимации в Firefox?
Доброго времени суток! Столкнулся с небольшой проблемкой касательно отображения анимации gif в FF. В IE и Opera гифка проигрывается...

Проигрывание анимации из скрипта С#
Доброго времени суток, вопрос может показаться простым, но мучился я долго (и в гугле и в ютубе был). Задача такая, нужно сделать...

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
Модель микоризы: классовый агентный подход 2
anaschu 06.01.2026
репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока
igorrr37 05.01.2026
/ * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03
palva 04.01.2026
Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru