При наведении на блок у него появляются свойства top 10px и left 10px. Как сделать так что бы это было плавно?

Question

[raw1]

Анимации нет как это исправить ?

.cell {
	width: 17%;
	background: red;
	float: left;
	position: relative;
	margin: 15px 1.5%;
	border-radius: 7px;
	transition: 0.5s;
	box-shadow: 17px 17px 6px rgba(0,0,0,.2);
	cursor: pointer;
	box-sizing: -box;
}
.cell:hover {
	top: 30px;
	left: 1%;
}

Answer 1

[Mikhail Osher]

1) transition: transform
2) &:hover { transform: translate(1%, 30px); }

Таким образом мы задействуем только paint уровень.
Подробности тут.

Comments

[raw1]

Спасибо

Answer 2

[Anna_BS]

.cell{
 -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

Comments

[raw1]

Спасибо большое , но не помогло