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

Question

[artem]

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

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;
}

Answer 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... )

Answer 2

[Данил Флигинский]

Была такая проблема. Задай transition и для :hover элемента и для обычного. Мне помогло. Костыльно, но по-другому хз как решать

Comments

[artem]

не робит