@keyframes на Gulp-Sass где искать ошибку?

Question

[slagoris]

Всем привет.
Помогите разобраться. Есть анимированная стрелка на CSS. Если писать на чистом CSS то все ок и работает. Если пишу через gulp-sass, то при написаниии последних двух строк кода (причем все что угодно вводишь и ошибка), gulp ломается и выдает ошибку. Вообще ума не приложу в чем дело. Прошу помощи. Код HTML CSS и ошибка GULP ниже.

<div class="main-arrow">
      <span></span>
      <span></span>
      <span></span>
</div>

CSS код

.main-arrow {
    margin: 40px auto 10px auto;
    width: 38px;
    height: 100px;
}
.main-arrow span {
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #337AB7;
    border-right: 5px solid #337AB7;
    transform: rotate(45deg);
    margin: -16px 0;
    animation: main-arrow 2s infinite;
}
.main-arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.main-arrow  span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes main-arrow  {
    0%{
        opacity: 0;
        transform: translate(0,-20px) rotate(45deg);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;

Sass-код

.main-arrow
	margin: 40px auto 10px auto
  width: 38px
  height: 100px
	span
		display: block
		width: 30px
  	height: 30px
  	border-bottom: 5px solid #337AB7
  	border-right: 5px solid #337AB7
  	transform: rotate(45deg)
  	margin: -16px 0
  	animation: main-arrow 2s infinite
		&:nth-child(2)
			animation-delay: -0.2s
		&:nth-child(3)
			animation-delay: -0.4s
@keyframes main-arrow
	0%
		opacity: 0
		transform: translate(0,-20px) rotate(45deg)
	50%
  	opacity: 1
	100%
		opacity: 0
  	transform: translate(0,20px) rotate(45deg)

Comments

[Lord_Dantes]

Возможно проблема в отступах, подсветите у себя в редакторе пробелы и табуляцию. Посмотрите в чем разница или прогоните такой код на песочнице.

[slagoris]

Slava, действительно. такая банальная ошибка. Хотя, прежде чем написать сюда, я проверял раз 20 наверное. нубище. Спасибо, ЛОРД!

Answer 1

[Александр]

@keyframes main-arrow
  0%
    opacity: 0
    transform: translate(0, -20px) rotate(45deg)
  50%
    opacity: 1
  100%
    opacity: 0
    transform: translate(0, 20px) rotate(45deg)

Используйте 1 вид табуляции (символы пробела/символ табуляции). Проверить можно тут.