0

Learning SCSS /CSS

Attempting to animate an <a>:hover with @keyframes.

When SCSS compiles, style.css doesn't get the <a>:hover lines of code, but the `at keyframes are showing up.

Tried placing the a:hover inside of the atag in SCSS and the compilation is the same result.

Please see Codepen below (top of CSS page is filled with reset code, please scroll down to .nav)

CodePen

Below is the actual 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;
        }
    }
}
}

`

sltdev
  • 429
  • 3
  • 6
  • 13
  • How does it make any sense at all to define `@keyframes` on `:hover`? That is the reasons SCSS deletes that part. – connexo Feb 22 '20 at 23:27
  • 2
    related: https://stackoverflow.com/q/14883250/8620333 .. you cannot apply transform to links without display:inline-block at least – Temani Afif Feb 22 '20 at 23:34

2 Answers2

1

If what you want is the animation to run on a:hover inside .nav, you need to define the keyframes outside of that block and apply the actual animation rules inside the :hover block:

.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;
    }
}

This compiles to

.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;
  }
}
connexo
  • 53,704
  • 14
  • 91
  • 128
1

As per your code pen this is how it should be written

.nav a {    
    //css property goes here
   &:hover{
     // Hover animation goes here
   }    
}
Akash
  • 377
  • 6
  • 17