Css анимация не работает как она должна

Question

Я разработчик, поэтому CSS не моя сильная сторона и анимации определенно не так.

Однако я пытаюсь создать простую анимацию - которая в настоящее время работает в какой-то степени - только не так, как мне это нужно, чтобы:

&:before 
    { 
     background-color:rgba(255,255,255,0.3); 
     height:100%; 
     transform:scale(0); 
     width:100%; 
    } 

    &:hover, &:focus, &:active 
    { 
     &::before 
     { 
      .animation(ripple .4s ease-out); 

      .keyframes(ripple; 
      { 
       100% 
       { 
        .transform(scale(1)); 
       } 
      }); 
     } 
    } 

Идея заключается в том, что при наведении курсора мыши, фокус, или активных состояний фоновая шкала выходит из центра - это и есть.

Однако, когда анимация завершена - и размер фона полностью, он возвращается в исходное состояние (исчезает), пока все еще находится в режиме наведения.

Какие изменения необходимо сделать для обеспечения того, чтобы фон оставался видимым во время фокусировки?

Answer 1

вы можете использовать forwards и inbricate в transition с animation заморозить его на некоторое время:

a, 
 
a:before, 
 
a:after { 
 
    display: inline-block; 
 
} 
 
a:before, 
 
a:after { 
 
    content: "\\o/"; 
 
    transform: scale(0); 
 
    transition: 99999s; 
 
    /* delay as much as possible return to normal */ 
 
} 
 
a:hover:before, 
 
a:hover:after { 
 
    transition: 0s;/* reset transition timing */ 
 
    animation: grow 1s forwards; 
 
    color: green; 
 
} 
 
@keyframes grow { 
 
    100% { 
 
    transform: scale(1); 
 
    } 
 
} 
 
html { 
 
    display: flex; 
 
    height: 100%; 
 
    width: 100%; 
 
    font-size: 5em; 
 
} 
 
body { 
 
    margin: auto; 
 
}

<a href="#">link</a>

codepen to play with.