간단한 초보자 단계: CSS 애니메이션!

재미있는 (때로는 기능적인) 주제인 CSS 애니메이션에 대해 이야기해 봅시다! 다음은 몇 가지 기본 사항입니다.

CSS 애니메이션은 정말 재미있는 주제이며 제 프로젝트에 재미와 생명을 더하기 위해 사용하는 것을 좋아합니다.

1. 첫 번째 단계는 애니메이션의 키프레임을 지정하는 것입니다.

키프레임은 주어진 시간에 요소가 가질 스타일을 유지합니다.

@keyframes example {
  from {background-color: blue;}
  to {background-color: red;}
}

내부에 CSS 스타일을 지정할 때 애니메이션은 시간이 지남에 따라 현재 스타일에서 새 스타일로 변경됩니다(지정).

2. 둘째, img, div 등과 같은 일부 요소에 애니메이션을 바인딩해야 합니다.

예를 들어:

div {
  width: 300px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 10s;
}

animation-name 속성에서 애니메이션을 호출하여 애니메이션을 div에 '바인딩'합니다. 또한 애니메이션을 실행하는 데 10초가 걸린다고 지정합니다.

!! 잊지 마세요. 애니메이션이 끝나면 요소가 원래 사양으로 돌아갑니다. 따라서 배경색을 파란색으로 선언했다면 애니메이션이 완료된 후 div는 다시 파란색으로 돌아갑니다.

3. animation-duration 속성 결정

animation-duration는 애니메이션을 완료하는 데 걸리는 시간을 지정합니다. 이 속성을 지정하지 않으면 기본값이 0(0초)이므로 애니메이션이 작동하지 않습니다.

4. 애니메이션 타이밍/분류

위의 예에서 시작점은 'from' 값이었고 끝점은 'to' 값이었습니다. 백분율을 사용하여 완료율을 나타낼 수도 있습니다. 즉, 원하는 만큼 세분화할 수 있습니다.

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(1800deg);
  }

  80% {
    transform: rotate(2085deg);
  }
  100% {
    transform: rotate(2160deg);
  }
}

이 예에서는 공이 화면을 가로질러 굴러가다가 멈추었습니다. 이것은 회전 측면의 키프레임입니다. 0-60% 완료에서 회전이 더 많고 100% 완료까지 천천히 줄어듭니다.

기타 애니메이션 속성:

animation-delay는 애니메이션이 실행되기 전에 지연 시간을 지정합니다. 음수 값을 지정하면 이미 X초 동안 재생된 것처럼 애니메이션이 시작됩니다.

animation-direction는 주기의 방향을 결정합니다. '정상'(기본값/앞으로), '역방향'(뒤로, duh), '대체'(먼저 앞으로, 그 다음 뒤로) 또는 '대체-역방향'(대체의 반대) 값을 가질 수 있습니다

.

animation-iteration-count는 애니메이션이 처음부터 끝까지 실행되는 횟수입니다. 중지하지 않으려면 'infinite' 값을 사용할 수 있습니다.

animation-timing-function는 애니메이션의 속도 곡선을 지정할 수 있습니다. 값은 'ease'(느리게 시작, 빠르게 실행, 느리게 종료), 'linear'(시작에서 끝까지 동일한 애니메이션 속도), 'ease-in'(느리게 시작만 해당), 'ease-out'(느리게 종료만 해당)일 수 있습니다. , 'ease-in-out'(느린 시작 및 종료)

코딩 팁:

CSS로 애니메이션을 작성할 때 가끔 속성을 별도로 유지하고 싶습니다. 읽기가 더 쉽기 때문입니다.

div {
  animation-name: example;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}

그러나 다음과 같이 단순화할 수도 있습니다.

div {
  animation: example 5s linear 2s infinite alternate;
}

이것들은 몇 가지 기본적인 팁입니다. 새로 찾은 힘을 즐기세요!