🎞️ CSS 애니메이션(Animation) 요약!

CSS로 애니메이션을 줘보자

 

애니메이션(Animation) 이란?

• 한 CSS 스타일에서 다른 CSS 스타일로 부드럽게 전환시켜 주는 것
• 애니메이션은 로드된 이후 바로 시행됨. 그러나 설정으로 조건에 따라 일어나게 만들 수도
• 한 번만 일어나게 할 수도, 아님 계속 반복하게 할 수도 있음
• 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임으로 구성
• 🐍 prefix 작성시 유의사항 : prefix 똑같이 달아야함

 

CSS에서 애니메이션 사용하는 방법

키프레임 작성하기

@keyframes namehere {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

 키프레임이란 애니메이션의 중간 상태를 적어준 것. 어디서 어떻게 변화할지가 적히게 된다. 다음과 같이 @keyframes라 적어준 후 뒤에 이름을 자기 맘대로 정해서 적어준다.

 그 안에 from에는 시작시 스타일은 어떨지 적고, 뒤에 to에는 끝날때는 어떨지 적어준다. 여기에 트랜스폼을 적어줘도 된다.

@keyframes namehere {
  0% {
    margin-left: 100%;
    width: 300%
  }
  
  75% {
  	margin-left: 50%;
    width: 200%;
  }
  
  100% {
    margin-left: 0%;
    width: 100%;
  }
}

중간 상태를 좀 더 자세하게 적어주고 싶으면 다음과 같이 퍼센트로 적어주면 된다.

 

애니메이션 적용하기

p {
  animation-name: slidein;
  animation-duration: 3s;
}

 위에서 설정한 키프래임을 animation 관련된 속성들을 이용해 각 선택자에 적용해준다. 여기서 애니메이션이 몇초동안 지속될지, 얼마나 반복될 것인지 적히게 된다. 애니메이션은 한 속성에 여러 개 지정할 수 있음. 속성들은 다음과 같다.

 

기본 속성

• ⭐ animation-name : 적용할 키프래임의 이름을 적어줌. 왠만하면 무조건 있어야 할 듯

 

시간에 관한 속성

• ⭐ animation-duration : 몇초간 지속될지 설정함. 안 적으면 애니메이션이 안 보인다.
• animation-delay : 로드되고 나서 몇초 뒤 애니메이션이 나올지 설정함
• animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정. linear라 하면 등속으로 돈다.

 

반복에 관한 속성

• animation-iteration-count : 애니메이션이 몇 번 반복될지 지정. infinite로 지정하여 무한히 반복할 수 있음
• animation-direction : 애니메이션 진행방향과 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정 normal(정방향), reverse(역방향), alternate(정방향 후 역방향), alternate-reverse(역방향 후 정방향)

 

상태에 관한 속성

• animation-play-state : 애니메이션을 멈추거나 다시 시작. running(애니메이션 실행), paused(멈춤)
• animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정

 

애니메이션을 조건에 따라 실행하는 방법

가상 선택자에 애니메이션 조건 넣기

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.box:hover {
  animation-duration: 3s;
  animation-name: rotate;
  animation-iteration-count: infinite;
}

 

See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen.

 

 

:hover와 같은 가상 선택자에 애니메이션 속성을 지정해주면 다음과 같이 특정 조건에만 애니메이션이 실행되게 할 수 있다. 하지만 애니메이션이 끝날 때 끊겨 보인다는 단점이 있다.

 

animation-play-state 속성 설정하기

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.box {
  animation-duration: 3s;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

 

See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen.

 

 

 

원래 선택자에 애니메이션 설정을 해준 후, animation-play-state를 paused로 설정해준다. 그리고 :hover에는 animation-play-state를 running으로 설정하면 애니메이션이 끊기지 않고 이어지게 된다.