arteqrt
@arteqrt
Почти не начинающий програмист

Transition не работает, как решить?

Нужно чтобы при наведении на блок менялся цвет медленно, но при этом, когда нажимаешь должна меняться позиция без задержки, что не так в коде? При нажатии работает быстро, а когда отпускаешь идет медленно.

div#register>a>div.btn {
	float: right;
	color: #ffffff;
	font-size: 1.4em;
	background-color: #acc6e6;
	border-radius: 5px;
	padding: 5px 9px;
	font-family: "Bahnschrift";
	font-weight: 600;
	margin-right: 2%;
	margin-top: 10px;
	transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	border: 1px solid #f2f2f2;
}

div#register>a>div.btn:hover {
	color: #acc6e6;
	background-color: #ffffff;
}

div#register>a>div.btn:active {
	margin-top: 12px;
	transition: all 0s ease;
	-o-transition: all 0s ease;
	-ms-transition: all 0s ease;
	-webkit-transition: all 0s ease;
	-moz-transition: all 0s ease;
}
  • Вопрос задан
  • 792 просмотра
Решения вопроса 1
Для transition можно указывать свойства которые вы хотите анимировать:
div#register>a>div.btn {
  float: right;
  color: #ffffff;
  font-size: 1.4em;
  background-color: #acc6e6;
  border-radius: 5px;
  padding: 5px 9px;
  font-family: "Bahnschrift";
  font-weight: 600;
  margin-right: 2%;
  margin-top: 10px;
  transform: translateX(0);
  transition: color 0.5s ease, background-color 0.5s ease;
  -o-transition: color 0.5s ease, background-color 0.5s ease;
  -ms-transition: color 0.5s ease, background-color 0.5s ease;
  -webkit-transition: color 0.5s ease, background-color 0.5s ease;
  -moz-transition: color 0.5s ease, background-color 0.5s ease;
  border: 1px solid #f2f2f2;
}

div#register>a>div.btn:hover {
  color: #acc6e6;
  background-color: #ffffff;
}

div#register>a>div.btn:active {
  transform: translateX(2px);
}

+ Дополнительно:
плохая идея анимировать margin, так как он изменяет layout (+ анимация не будет 60fps),
для плавных переходов, которые не требуют изменения layout лучше использовать transform ( https://medium.com/outsystems-experts/how-to-achie... )
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@danilfliginskiy
Фронтендер, программист
Была такая проблема. Задай transition и для :hover элемента и для обычного. Мне помогло. Костыльно, но по-другому хз как решать
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы