Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
1 / 2 / 0
Регистрация: 19.11.2018
Сообщений: 13
1

Дерганая анимация при ховере

05.12.2018, 19:13. Просмотров 1025. Ответов 4


Пишу простенькую анимацию на каскадных таблицах стилей, проблема следующая:
CSS
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
38
39
40
41
42
43
44
45
#container {
  display: block;
  width: 500px;
  height: 150px;
  background-color: #bbb;
  font-size: 5rem;
  text-align: center;
 
  padding-top: 10px;
  margin: auto;
 
}
 
#margin-top {
  margin-top: 10px;
}
 
#secondContainer {   /* На него внимания обращать не стоит, я еще не доделал анимацию для этого блока */
  display: block;
  width: 500px;
  height: 150px;
  background-color: #bbb;
  font-size: 4rem;
  text-align: center;
  padding-top: 10px;
 
  margin-top: -160px;
  margin-left: -500px;
}
 
#container:hover {
  animation-name: onhover;
  animation-duration: 3.3s;
}
 
@keyframes onhover {
  50% {
    transform: translateX(200px);
    border-radius: 3%;
  }
  100% {
    transform: translateX(500px;);
    border-radius: 5%;
  }
}

Есть блок, он анимируется, мне этого хватает, но (!)

при анимации, если пользователь подергает мышкой влево, анимация сбросится, что делать?

Кто хочет проверить -

https://codepen.io/melorumXZ/pen/rQELbp

0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.12.2018, 19:13
Ответы с готовыми решениями:

Градиент при ховере
как такой градиент(фон) сделать? сам стиль? Если ещё кто нибудь объяснил бы как он градиенты эти...

при ховере бордер не проподает
Учусь верстать много траблов, нужен взгляд со сторонны профи)) И какое-нибудь направление в нужное...

Как убрать подергивания при ховере?
Здравсnвуйте! Чет не пойму на как убрать подергивания при ховере вот здесь где товары...

Дерганая анимация в StackView QML
Всем привет. У меня странная анимация при открытии в StackView когда я хочу открыть следующий...

4
<h1>Hello world</h1>
17 / 16 / 3
Регистрация: 17.12.2016
Сообщений: 181
Записей в блоге: 6
05.12.2018, 21:25 2
Melorum, свойство hover работает только при наведении на элемент...
Вам нужно запустить анимацию при нажатии на блок и что бы анимация продолжила работу после того как вы отвели курсор от блока ?
0
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,713
Записей в блоге: 1
06.12.2018, 09:40 3
Цитата Сообщение от Melorum Посмотреть сообщение
анимация сбросится, что делать?
перевесить ховер на обертку анимируемого блока
CSS
1
2
3
4
#margin-top:hover #container{
  animation-name: onhover;
  animation-duration: 3.3s;
}
https://codepen.io/follower1983/pen/oQrmWL
0
Эксперт HTML/CSS
1320 / 1102 / 481
Регистрация: 07.08.2016
Сообщений: 3,039
06.12.2018, 10:12 4
Цитата Сообщение от fol Посмотреть сообщение
перевесить ховер на обертку анимируемого блока
Будет тот же самый эффект при выходе курсора из обертки. Такого поведения, как хочет ТС, без js не сделать.
0
1 / 2 / 0
Регистрация: 19.11.2018
Сообщений: 13
06.12.2018, 18:23  [ТС] 5
спасибо, буду делать через javaScript.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
06.12.2018, 18:23

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Дерганая картинка при игре в CS: GO на i5 6400
Изображение замирает на долю секунды, но эти зависания происходят каждые секунд 10-15 и это...

Сменить цвет при ховере
Есть такое меню для сайта: Как сделать, чтобы при наведении на каждую кнопку менялся цвет...

При экспорте ролика анимация внутри анимации не проигрывается. Просто при публикации swf все норм
В 1 кадре сделана классическая анимация движения спрайта. Но, этот спрайт внутри также...

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


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.