CSS 키프레임 애니메이션을 만드는 방법

CSS 키프레임 애니메이션을 만드는 방법

CSS는 개발자가 키프레임 애니메이션을 사용하여 웹 페이지에 생기를 불어넣을 수 있는 기능을 제공합니다.





CSS 애니메이션은 다양한 속성을 통해 HTML 요소의 초기 상태를 변경하여 달성됩니다. 애니메이션을 적용할 수 있는 몇 가지 일반적인 CSS 속성은 다음과 같습니다.



Windows 10 휴지통 아이콘이 없습니다.
  • 너비
  • 키
  • 위치
  • 색상
  • 불투명

이러한 일반 CSS 속성은 원하는 결과를 생성하기 위해 특정 CSS 요소에 의해 조작됩니다. 웹 페이지에서 애니메이션 요소를 본 적이 있다면 해당 요소가 키프레임 애니메이션을 사용하여 애니메이션되었을 가능성이 있습니다.





키프레임 요소란 무엇입니까?

NS 키프레임 요소 액세스 권한이 있는 하나 이상의 HTML 요소에서 사용할 수 있습니다. 요소 상태의 특정 지점을 식별하고 이 요소가 현재 가져야 하는 모양을 지정합니다.

이것은 소화하기 위해 많은 것처럼 들릴 수 있지만 실제로는 매우 간단합니다. NS 키프레임 요소 애니메이션 요구 사항에 맞게 쉽게 이해하고 조정할 수 있는 매우 간단한 구조를 가지고 있습니다.



키프레임 구조의 예


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

녹색 직사각형 버튼을 파란색 원형 버튼으로 바꿔 애니메이션 효과를 적용한다고 가정해 보겠습니다.

매개변수 내에서 ~에서 위의 섹션에서 요소가 녹색 직사각형 버튼처럼 보이도록 하는 데 필요한 모든 스타일을 배치한 다음 에게 섹션에서 이 버튼을 파란색 둥근 버튼으로 변환하기 위한 모든 스타일 요구 사항을 배치합니다.

생각해보면 애니메이션처럼 들리지 않습니다. 글쎄요, 이 전체 프로세스의 핵심 구성 요소가 아직 도입되지 않았기 때문입니다. 이 구성 요소는 애니메이션 속성입니다.

애니메이션 속성

NS 애니메이션 속성 다른 하위 속성 집합이 있습니다. 이들은 원하는 HTML 요소에 애니메이션을 적용하기 위해 위의 키프레임 구조와 함께 사용됩니다.

그러나 프로젝트에서 애니메이션을 구현하려면 이러한 하위 속성 중 5개와 관련된 값만 알면 됩니다. 이러한 속성은 다음과 같이 알려져 있습니다.

  • 애니메이션 이름
  • 애니메이션 지속 시간
  • 애니메이션 타이밍 기능
  • 애니메이션 지연
  • 애니메이션 반복 횟수

웹 페이지에서 애니메이션 사용

위의 시나리오를 사용하여 목표는 애니메이션 버튼을 만드는 것입니다.

버튼 애니메이션 예







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!


위 코드의 애니메이션 섹션에는 앞에서 언급한 5개의 하위 속성이 포함되어 있습니다. 각 속성에는 매우 고유한 기능이 있으며 함께 작동하여 대상으로 지정된 HTML 요소에 애니메이션을 적용합니다.

관련: CSS 선택기를 사용하여 웹 페이지의 일부를 대상으로 지정하는 방법

애니메이션 이름 속성

이 속성은 목록에서 가장 중요한 단일 속성입니다. 없이 애니메이션 이름 속성 , 당신은 과거에 식별자가 없을 것입니다 키프레임 요소 , 매개변수 내의 모든 코드를 쓸모없게 만듭니다.

다른 하위 속성 중 하나 또는 두 개를 포함하는 것을 잊은 경우에도 여전히 꽤 괜찮은 애니메이션을 가질 수 있습니다. 그러나 잊어 버린 경우 애니메이션 이름 속성 애니메이션이 없을 것입니다.

Animation-duration 속성

이 속성은 한 상태에서 다음 상태로 전환할 때 애니메이션 요소가 걸리는 시간을 정의하는 데 사용됩니다.

위의 예에서 animation-duration 속성 5초(5초)로 설정되어 있으므로 녹색 직사각형 버튼은 완전히 파란색 원형 버튼이 되기까지 총 5초가 소요됩니다.

애니메이션 지연 속성

이 속성은 한 가지 이유로 중요합니다. 일부 웹 페이지는 완전히 로드하는 데 몇 초가 걸릴 수 있습니다(여러 가지 요인으로 인해). 그래서 애니메이션 지연 속성 웹 페이지를 로드하는 데 시간이 걸리는 경우를 대비하여 애니메이션이 즉시 시작되는 것을 방지합니다.

위의 예에서 애니메이션 지연 속성 4s로 설정되어 있습니다. 즉, 웹 페이지를 방문한 후 4초가 지나야 애니메이션이 시작됩니다(애니메이션이 시작되기 전에 웹 페이지를 로드할 수 있는 충분한 시간 제공).

Animation-iteration-count 속성

이 속성은 애니메이션 요소가 한 상태에서 다음 상태로 전환되어야 하는 횟수를 나타냅니다. NS 애니메이션 반복 횟수 속성 단어와 숫자 값을 취합니다. 숫자 값은 1 이상일 수 있지만 단어 값은 일반적으로 무한 .

위의 예에서 애니메이션 반복 횟수 값 로 설정됩니다 무한 즉, 웹 페이지가 실행 중인 한 버튼 속성은 한 상태에서 다음 상태로 계속해서 애니메이션됩니다.

애니메이션 타이밍 기능 속성

이 속성은 한 상태에서 다음 상태로 전환할 때 애니메이션 요소의 동작을 지정합니다. NS 애니메이션 타이밍 기능 속성 일반적으로 세 가지 부드럽게 값 중 하나가 할당됩니다.

  • 이즈 인
  • 이즈아웃
  • 이지 인 아웃

NS 나가기 쉬운 가치 위에서 사용되었습니다. 이렇게 하면 애니메이션이 한 상태에서 다른 상태로 천천히 전환됩니다. 버튼이 녹색 사각형에서 파란색 원으로 변환될 때 느린 전환을 만드는 것이 목표인 경우 편리한 가치 . 반대 방향으로만 느린 전환을 원하면 다음을 사용합니다. 이즈아웃 가치 .

코드 줄이기

대부분의 경우 프로그램의 길이를 줄이는 것이 실용적인 접근 방식으로 간주됩니다. 이는 주로 코드 행 수가 줄어들수록 프로그램에서 눈에 띄지 않는 오류가 발생할 가능성이 줄어들기 때문입니다.

위의 코드는 4줄로 줄일 수 있습니다. 이는 각 하위 속성을 명시적으로 식별하지 않고 animation 속성을 사용하여 간단하게 달성할 수 있습니다.

버튼 애니메이션 예제 코드 줄이기







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}