15강 - mouseenter시에만 호버 발동하는 효과

<span>안녕</span>

span {
    font-weight: bold;
    position : relative;
    
}

span::after {
    content : '';
    position : absolute;
    bottom: 0px;
    left: 50%;
    height: 2px;
    width: 100%;
    background-color: red;
    transform : translateX(-50%);
}
span:hover::after {
    animation-name : ani-1;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-timing-function : linear;    
}

@keyframes ani-1 {
    10% {
        width: 0;
    }
    50% {
        width: 100%;
    }
    70% {
        width: 80%;
    }
    100% {
        width: 100%;
    }
}

• @keyframes 중간 애니메이션 지정할 수 있다.
• animation-timing-function : linear; 애니메이션 속도 비슷하게 적용
• 코드펜으로 완성된 코드 한번에 보러가기