Не работает свойство transition на мобильных устройствах?

Question

[nemovalex]

Хотел сделать бургер меню с легкой анимацией, с дестктопов и ноутбуков все работает нормально даже когда открываешь эмуляцию мобильного устройства, но cтоит открыть на телефоне работает анимация только для свойства
top но не работает для transform
Код:

<div class="burger-btn" onclick="activeBurgerMenu(this)">
							<div class="burger"></div>
						</div>

CSS (SCSS)

.burger-btn
{
  background: $header-color;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content:center;
  align-items:center;
}

.burger 
{
  width: 30px;
  height: 5px;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease-in 0.2s;
  -moz-transition: background-color 0.2s ease-in 0.2s;
  -ms-transition: background-color 0.2s ease-in 0.2s;
  -o-transition: background-color 0.2s ease-in 0.2s;
  transition: background-color 0.2s ease-in 0.2s;
}

.burger::before
{
  position: absolute;
  left: 0;
  top: -10px;
  content: '';
  display: block;
  width: 30px;
  height: 5px;
  background: #fff;
  -webkit-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  -moz-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  -ms-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  -o-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
}

.burger::after
{
  position: absolute;
  left: 0;
  top: 10px;
  content: '';
  display: block;
  width: 30px;
  height: 5px;
  background: #fff;
  -webkit-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  -moz-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  -ms-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  -o-transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
  transition: transform 0.2s ease-in,top 0.2s linear 0.2s;
}

.burger-btn.active
{
	.burger
	{
	   background-color: transparent;
	   -webkit-transition: background-color 0.2s ease-in 0.2s;
	   -moz-transition: background-color 0.2s ease-in 0.2s;
	   -ms-transition: background-color 0.2s ease-in 0.2s;
	   -o-transition: background-color 0.2s ease-in 0.2s;
	   transition: background-color 0.2s ease-in 0.2s;
	}

	.burger::before
	{  
	    top:0;
	    -webkit-transform: rotate(45deg);
	    -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	    -o-transform: rotate(45deg);
	    transform: rotate(45deg);
	    -webkit-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    -moz-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    -ms-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    -o-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	}

	.burger::after
	{	
		top: 0;
	    -webkit-transform: rotate(-45deg);
	    -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	    -webkit-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    -moz-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    -ms-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    -o-transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	    transition: top 0.2s linear, transform 0.2s ease-in 0.2s;
	}
}

Comments

[Артем Золин]

Попробуйте убрать последнее свойство delay 0.2s

[nemovalex]

Артем Золин, Пробовал, проблема скрывалась в том что я не прописал изначальное значение transition для элемента,

Answer 1

[Ankhena]

Добавьте начальные значения transform

Comments

[nemovalex]

Спасибо, совсем не подумал про это