a: hover не регистрируется || @keyframes

Question

Learning S CSS / CSS

Попытка анимировать <a>: зависание с @keyframes.

Когда SCSS компилируется, style.css не получает <a>:hover строк кода, но отображаются ключевые слова `at.

Попытка размещения a:hover внутри тега a в SCSS, и компиляция - тот же результат.

См. Codepen ниже (верхняя часть CSS страница заполнена кодом сброса, , пожалуйста, прокрутите вниз до .nav)

CodePen

Ниже приведен фактический SCSS

`.nav {
display: flex;
flex-wrap: nowrap;
height: 100px;
background-color: #ecdfc8;`


&__img{
    flex: 1 1 10%;

}

img{
    height: 100px;
    margin: auto;
}

&__section{
    flex: 8 1 90%;
    display: flex;
    justify-content: space-between;
}

&__ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

&__ul--lf{
    width: 50%;
}

&__ul--rt{
    width: 15%;
}

&__item{
    //display: flex;

}

a{
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    @include btn($px, $px1);
    animation-name: grow;
    animation-duration: 4 hus;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;



}

&:hover{
    @keyframes grow {
        0%{
            transform: scale(1);
        }
        100%{
            transform: scale(2);
            background-color: #fff;
        }
    }
}
} 

`

Answer 1

Согласно вашему коду, это должно быть написано

.nav a {    
    //css property goes here
   &:hover{
     // Hover animation goes here
   }    
}

Answer 2

Если вы хотите, чтобы анимация запускалась на a:hover внутри .nav, вам нужно определить ключевые кадры вне этого блока и применить фактические правила анимации внутри блока :hover:

.nav {
    a {
        color: #fff;
        text-decoration: none;
        font-weight: 300;
        &:hover {
            animation-name: grow;
            animation-duration: 4 hus;
            animation-timing-function: ease-in;
            animation-fill-mode: forwards;
        }
    }
}

@keyframes grow {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(2);
        background-color: #fff;
    }
}

Это компилируется в

.nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 300;
}

.nav a:hover {
  animation-name: grow;
  animation-duration: 4 hus;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes grow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
    background-color: #fff;
  }
}