TIL 33일차_CSS애니메이션

애니메이션

애니메이션의 속성은 아래와같이 구성된다.

• animation-name : @keyframes 이름 (자유롭게 작성가능)
• animation-duratuion : 타임 프레임의 길이, 키프레임이 동작하는 시간을 설정할 때 사용
• animation-timing-function : 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier )
• animation-delay : 애니메이션을 시작하기 전 지연시간 설정
• animation-iteration-count : 반복 횟수 지정
• animation-direction : 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며)
• animation-fill-mode : 애니메이션 시작 / 끝 상태 제어 ( none / forwords / backwords / both )

축약하여 showup이라는 애니메이션을 작성하면 다음과 같다.

main{
  animation: showUp 4s 1s infinite linear alternate;
}

@keyframes

@keyframes는 CSS 애니메이션에서 구간을 정하고 구간별로 어떤 스타일을 적용시킬지 정하는 문법이다.

@keyframes 를 사용하기 위해선 세 가지가 필요하다.

• animation-name : 사용자가 직접 지정한 이름, @keyframes 가 적용될 애니메이션의 이름
• 스테이지 : from - to 로 0~100% 의 구간
• CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일

.content{
  animation: show-up 0.5s;
}

@keyframes show-up {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    transform: translateY(20px);
  }
}

위의 코드에서 스테이지를 %로 지정했지만, from to를 이용해도 같다.

@keyframes show-up {
  from {
    opacity: 0;
    transform: translateY(60px);
  }

  to {
    opacity: 1;
    transform: translateY(20px);
  }
}

opacity는 불투명도로, 0일때 안보이고 1일때 보인다고 생각하면 편할 것 같다.