animation-fill-mode 속성값으로 애니메이션 실행 전 후 스타일 지정하기

animation-fill-mode: 속성값

✔️ none

✔️ forwards

✔️ backwards

✔️ both

⭐️ 속성값이 달라지는 부분 ⭐️
<style>
    div{
      width:100px;
      height:100px;
      background-color:red;
      animation-name:bgchange;
      animation-duration:5s;
      animation-delay: 2s;
      ⭐️ animation-fill-mode:속성값; ⭐️
    }
    @keyframes bgchange {
      0%{background-color:blueviolet;}
      25%{background-color:orange;}
      50%{background-color:yellow;}
      100%{background-color:green;}
    }
</style>

animation-fill-mode: none

☑️ 시작지점(0%, from) 스타일(blueviolet) 적용하지 않고 대기

☑️ 지연 시간동안도 원래 스타일(red)을 유지

☑️ 실행 완료 후에는 원래 스타일(red)로 돌아감

animation-fill-mode: forwards

☑️ 시작지점(0%, from) 스타일(blueviolet) 적용하지 않고 대기

☑️ 지연 시간동안도 원래 스타일(red)을 유지

☑️ 실행 완료 후에는 종료시점(100%, to)의 스타일(green)을 적용하고 대기

animation-fill-mode: backwards

☑️ 시작지점(0%, from) 스타일(blueviolet) 적용하고 대기

☑️ 지연 시간동안도 시작지점 스타일(blueviolet)을 유지

☑️ 실행 완료 후에는 원래 스타일(red)로 돌아감

animation-fill-mode: both

☑️ 시작지점(0%, from) 스타일(blueviolet) 적용하고 대기

☑️ 지연 시간동안도 시작지점 스타일(blueviolet)을 유지

☑️ 실행 완료 후에는 종료시점(100%, to)의 스타일(green)을 적용하고 대기