TIL #14 CSS Animation과 @keyframes 그리고 실습

animation

animation-delay

animation-delay : 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정

animation-delay: 4s;

animation-direction

animation-direction: 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정

 animation-direction: alternate;;

normal: 지정된 방향으로 재생.

reverse: 반대 방향으로 재생.

alternate: 지정된 방향, 반대 방향 순으로 반복.

alternate-reverse: 반대 방향, 지정된 방향 순으로 반복.

animation-duration

animation-duration: 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정

animation-duration: 4s;

animation-iteration-count

animation-iteration-count :애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있다.
초기값은 1 이다.

 animation-iteration-count: infinite;

animation-name

animation-name : @keyframes 이름을 적어 @keyframes에 작성한 효과를 적용시킨다.

animation-name: tutsFade;

animation-play-state

animation-play-state :애니메이션을 멈추거나 다시 시작할 수 있다.
초기값은 running이다.

running :애니메이션 실행.

paused :애니메이션 정지.

animation-timing-function

animation-timing-function :중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정

ease : 기본값으로 천천히 시작하여 빨라졌다가 종료에 가까워지면 다시 느려지게 변화.

ease-in : 천천히 시작하여 종료에 가까워지면 빠르게 변화.

ease-out: 빠르게 시작하여 종료에 가까워지면 천천히 변화.

ease-in-out : 시작과 종료지점에서만 천천히 움직임.

linear : 시작부터 종료까지 일정하게 움직임

step-start :시작과 동시에 종료 상태로 됨.

step-end : 종료 시점에 동작.

steps : steps(정수, start 또는 end) 지정. 예를 들어 5라는 숫자를 지정하면 5단계로 나누어 움직인다.

cubic-bezier : 움직임을 임의로 설정.

animation-fill-mode

animation-fill-mode :애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정
초기값은 none이다.

none: 시작 전, 종료 후 적용 안 함.

forwards: 종료 후 스타일이 적용.

backwards: 시작 전 스타일이 적용.

both: forwards와 backwards 둘다 적용.

@keyframes

@keyframes는 애니메이션의 시작부터 종료 부분까지 어떠한 동작을 할 것인지 지정할 수 있는 css 문법이다.

@keyframes 이름 {
	0% {
		CSS 속성: 값;
	}
	100% {
		CSS 속성: 값;
	}
}

0%~ 100% 사이의 숫자값들을 추가적으로 입력하여 중간 값들을 설정할 수 있다.
퍼센트가 아닌 from, to 로도 지정할 수 있다.

직접 만든 에니메이션 예제

keyframes hideSplashScreen {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

#splash-screen {
  background-color: var(--yellow);
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 122px;
  animation: hideSplashScreen 0.4s ease-in-out forwards;
  animation-delay: 2s;
}

opacity는 투명도를 주는 속성이다. 0~1 까지 사용하여 투명도를 나타낸다.

visibility: hidden

visibility는 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨긴다.

페이지를 로딩할때 잠깐 화면에 애니메이션효과가 적용된 후
다시 원래 페이지로 돌아가는 애니메이션이다.
애니메이션 종료 후에도 웹페이지 제일 상단에 위치하여 다른 요소를 클릭할 수가 없었기 떄문에
visibility를 hidden 값을 주어 숨겨 애니메이션 종료 이후에도 클릭이 가능하도록 하였다.