SASS переменные в ключевых кадрах не работают

Question

Я пытаюсь использовать некоторые переменные SASS для изменения анимации CSS, но, похоже, это отклоняет все, что я пытаюсь. Я тоже пробовал форматировать его как mixin, но безуспешно. $ WaitTime и $ fadeTime инициализируются 4.5 и .5 соответственно, намного дальше над следующим фрагментом:

 @keyframes fadeLoop{ 
      0%{ 
       height: auto; 
       transform: translate(-10%, 0); 
       opacity: 1; 
      } 
      (($waitTime/(($waitTime + $fadeTime)*10))*100) + %{ 
       transform: translate(10%, 0); 
       opacity: 1; 
      } 
      ((($waitTime + $fadeTime)/(($waitTime + $fadeTime)*10))*100) + %{ 
       height: 0; 
       overflow: hidden; 
      } 

      100%{ 

      } 
     } 

ошибка получили в жизни:

Error: Invalid CSS after "": expected keyframes selector (e.g. 10%), was "(($waitTime/(($..." 
     on line 131 of /Users/CyrusRoshan/GitHub/Active/CS2-Redesign/css/style.scss 

126:    0%{ 
127:     height: auto; 
128:     transform: translate(-10%, 0); 
129:     opacity: 1; 
130:    } 
131:    (($waitTime/(($waitTime + $fadeTime)*10))*100) + %{ 
132:     transform: translate(10%, 0); 
133:     opacity: 1; 
134:    } 
135:    ((($waitTime + $fadeTime)/(($waitTime + $fadeTime)*10))*100) + %{ 
136:     height: 0; 

Answer 1

У вас есть 2 проблемы.

• Вы должны использовать интерполяцию в ключевом кадрах процента
• Вы преобразование числа в проценты неправильно

$waitTime: 4.5; 
$fadeTime: .5; 

@keyframes fadeLoop{ 
    0%{ 
     height: auto; 
     transform: translate(-10%, 0); 
     opacity: 1; 
    } 
    #{(($waitTime/(($waitTime + $fadeTime)*10))*100%)} { 
     transform: translate(10%, 0); 
     opacity: 1; 
    } 
    #{((($waitTime + $fadeTime)/(($waitTime + $fadeTime)*10))*100%)} { 
     height: 0; 
     overflow: hidden; 
    } 

    100%{ 

    } 
}