HTML 언어는 웹 페이지의 구조를 제공하고 CSS는 해당 응용 프로그램의 디자인과 형식을 제공합니다. 이 조합을 사용하면 정적 요소에 비해 애니메이션 요소가 더 매력적으로 보이기 때문에 애니메이션을 추가할 수도 있습니다. 또한 요소의 스타일을 점진적으로 변경할 수 있습니다.
이 문서에서는 요소에 애니메이션을 적용하는 방법을 안내합니다. 자, 시작하겠습니다!
CSS 애니메이션 키프레임이란 무엇입니까?
애니메이션을 완성하려면 애니메이션을 HTML 요소에 바인딩해야 합니다. 이를 위해 '라는 키워드를 사용합니다. @키프레임 ” 뒤에 애니메이션 이름이 붙습니다. 이 구성 요소는 애니메이션의 시작과 끝을 지정합니다.
CSS 애니메이션 키프레임을 설정하는 방법은 무엇입니까?
CSS에서 애니메이션 키프레임을 설정하기 위해 두 가지 예를 살펴보겠습니다.
예 1
CSS에서 애니메이션 키프레임을 설정하려면 다음 단계를 수행하십시오.
-
- 클래스 이름이 '인 를 추가합니다. 메인 사업부 '.
- div 안에 클래스 이름이 '인 다른 div를 추가합니다. img-펭 '.
- 이 img-peng div 안에
를 추가하여 이미지를 배치합니다. 이 태그에는 ' 소스 ' 이미지 경로를 제공하는 속성, ' 모든 것 '는 이미지가 표시되지 않을 때 추가되는 대체 텍스트이며 ' 너비 ” 속성을 사용하여 이미지의 너비를 제공합니다.
HTML
< 사업부 수업 = '메인 사업부' >
< 사업부 수업 = '임펭' >
< 이미지 소스 = '이미지/penguin.png' 모든 것 = '펭귄' 너비 = '100' >
사업부 >
사업부 >
.main-div {
CSS
너비: 90 % ;
높이: 90px;
배경색: rgb ( 67 , 66 , 87 ) ;
여백: 20px 자동;
패딩: 10px;
}
CSS에서 ' .main-div ”가 추가되어 div 클래스에 액세스합니다. 적용되는 속성은 다음과 같습니다.-
- “ 너비 ” 속성 값은 div의 너비를 정의합니다.
- “ 키 ” 속성은 div의 높이를 설정하는 데 사용됩니다.
- “ 배경색 ” 속성은 요소의 배경에 색상을 적용합니다.
- “ 여유 ”는 “로 설정 20px 자동차 ”로 상하 여백을, auto는 좌우 균등 여백을 의미한다.
- “ 심 ” 속성 값은 10px로 할당되어 요소 콘텐츠 주위에 여백을 적용합니다.
스타일 img-peng 클래스
.img-펭 {
너비: 50px;
높이: 100px;
위치: 상대적;
애니메이션: 흔들기;
애니메이션 기간: 2초;
애니메이션 타이밍 기능: 2초;
animation-iteration-count: 무한;
}
“ .img-펭 ”는 위의 HTML 파일에서 언급한 div 클래스에 액세스하는 데 사용됩니다. 이 div 요소는 아래에서 설명하는 속성으로 스타일이 지정됩니다.-
- “ 너비 ” 속성 값은 요소의 너비를 설정하는 데 사용됩니다.
- “ 키 ” 속성 값은 요소의 높이를 설정하는 데 사용됩니다.
- “ 위치 ” 속성에 “ 상대적인 ”, 이는 정상 위치를 기준으로 위치가 지정됨을 의미합니다.
- “ 생기 ” 이름은 “ 떨림 '. 그러나 요구 사항에 따라 애니메이션의 이름을 지정할 수 있습니다.
- “ 애니메이션 기간 ”는 애니메이션의 지속 시간을 나타내며 2초입니다.
- “ 애니메이션 타이밍 기능 ”에는 2초의 값이 할당되어 2초 안에 애니메이션이 완료됩니다.
- “ 애니메이션 반복 횟수 ”가 무한으로 설정되어 있어 이 애니메이션이 무한한 시간에 발생함을 의미합니다.
to 및 from 키워드로 @keyframes 정의
@ 키프레임 흔들기 {
~에서 {
상단: 50px;
}
에게 {
여백 하단: 200px;
}
}
이미지에 설정된 애니메이션 키프레임에 대한 설명은 다음과 같습니다.-
- “ @키프레임 흔들림 ”는 @keyframes 키워드가 뒤따르는 애니메이션 이름 흔들림을 나타냅니다. 이 규칙 내에서 애니메이션의 동작이 지정됩니다.
- 중괄호 안에는 ' ~에서 ' 그리고 ' 에게 ” 키워드는 애니메이션 동작을 정의하기 위해 다른 간격을 지정합니다.
- “ 맨 위 ” 속성에는 50px 값이 할당되는데, 이는 애니메이션이 화면 상단에서 50px에서 시작하여 하단에서 200px까지 계속된다는 것을 의미합니다.
결과적으로 다음과 같은 결과가 표시됩니다.
이제 애니메이션이 다른 간격으로 다르게 동작하도록 합니다. 이렇게 하려면 @keyframes에서 애니메이션 비율을 활용하십시오.백분율로 @keyframes 지정
@ 키프레임 흔들기 {
0 % {
왼쪽: -50px ;
}
25 % {
왼쪽: 50px;
}
오십 % {
왼쪽: -25px ;
}
75 % {
왼쪽: 25px;
}
100 % {
왼쪽: 10px;
}
}
따라서 위의 코드 스니펫에 대한 설명은 다음과 같습니다.-
- 백분율 값 0%, 25%, 50%, 75% 및 100%는 서로 다른 간격의 애니메이션을 나타냅니다.
- 또한 0%에서는 이미지 왼쪽의 공간이 ' -50px '. 25%에서 왼쪽 공간은 ' 50픽셀 '. 50%에서 왼쪽 공간은 ' -25px '. 75%에서 왼쪽 공간은 ' 25픽셀 ”, 애니메이션이 완료(100%)되면 남은 공간은 “ 10px '.
위의 코드는 다음 애니메이션을 표시합니다.
다른 예를 들어 이미지에 애니메이션을 설정하는 방법을 살펴보겠습니다.예 2
HTML에서 클래스 이름이 '인
를 추가합니다. 메인 페이지 '. 이요소 안에 클래스 ' 클라우드1 ' 그리고 ' 클라우드2 ', 각각.HTML
< 사업부 수업 = '메인 페이지' >
< 사업부 수업 = '클라우드1' > 사업부 >
< 사업부 수업 = '클라우드2' > 사업부 >
사업부 >
신체 {
CSS
여유: 0 ;
심: 0 ;
}
CSS에서는 다음 CSS 속성을 body 요소에 할당합니다.-
- “ 여유 ” 속성을 0으로 지정하면 요소 주변에 공백이 없습니다.
- “ 심 ” 값이 0인 속성은 요소 콘텐츠 주변에 공백을 지정하지 않습니다.
스타일 메인 페이지 div
.메인 페이지 {
배경 이미지: URL ( / 이미지 / 늑대의 밤.png ) ;
background-repeat: 반복하지 않음;
배경 크기: 표지;
높이: 100vh;
위치: 상대적;
오버플로: 숨김;
}
여기:-
- “ .메인 페이지 ”는 div 클래스에 액세스하는 데 사용됩니다.
- “ 배경 이미지 ” 속성에 “ url(/images/wolf-night.png) ” 여기서 images는 wolf-night.png 이미지가 포함된 폴더입니다.
- “ 배경 반복 ” 속성에 “ 반복하지 않는 , 이미지가 한 번 표시됨을 의미합니다.
- “ 배경 크기 '는 '로 설정됩니다. 씌우다 ” 전체 div 요소를 채웁니다.
- “ 키 ”는 뷰포트 높이의 100%인 100vh입니다.
- “ 위치 ” as relative는 현재 위치를 기준으로 이미지 위치를 설정합니다.
- “ 과다 ” 속성의 값은 hidden으로 설정되어 컨테이너에 들어가기에는 너무 큰 이미지 부분을 숨깁니다.
스타일클라우드1급
.cloud1 {
배경 이미지: URL ( / 이미지 / 구름.png ) ;
배경 크기: 포함;
background-repeat: 반복하지 않음;
위치: 절대;
상단: 100px;
너비: 500px;
높이: 300px;
애니메이션: cloudanimation1;
애니메이션 기간: 70초;
animation-iteration-count: 무한;
}
div 클래스 cloud1은 다음 설명 속성과 함께 적용됩니다.-
- “ .cloud1 ”는 div 클래스 cloud1에 액세스하는 데 사용됩니다.
- “ 배경 이미지 ” 속성은 url(/images/cloud.png)로 설정되며, 여기서 이미지는 cloud.png 이미지가 포함된 폴더입니다.
- “ 배경 크기 ” 값으로 “ 포함하다 ”는 이미지의 가시성을 보장합니다.
- “ 배경 반복 '로 설정된 값이 있는 속성 반복 금지 ”는 반복되지 않는 이미지를 표시합니다.
- “ 위치 ”는 부모의 요소를 기준으로 이미지를 절대 위치로 지정합니다.
- “ 맨 위 ” 속성은 이미지를 상단에서 100px로 설정합니다.
- “ 너비 ” 속성은 div 요소의 너비를 500px로 설정하는 데 사용됩니다.
- “ 키 ” 속성은 div 요소의 높이를 300px로 설정하는 데 사용됩니다.
- “ 생기 ”에는 cloudanimation1이라는 이름이 지정됩니다.
- “ 애니메이션 기간 ”는 애니메이션의 지속 시간을 나타내며 70초입니다.
- “ 애니메이션 반복 횟수 ”에는 무한 값이 할당되어 애니메이션을 무한 반복합니다.
지금까지 div 클래스 main-page와 cloud1에 CSS 속성을 적용했습니다. 이제 다음 섹션에서는 cloud2라는 다음 div 클래스의 스타일을 지정합니다.
스타일 클라우드2 클래스
.cloud2 {
배경 이미지: URL ( / 이미지 / 구름.png ) ;
배경 크기: 포함;
background-repeat: 반복하지 않음;
위치: 절대;
상단: 50px;
폭: 200px;
높이: 300px;
애니메이션: cloudanimation2;
애니메이션 기간: 15초;
animation-iteration-count: 무한;
}
div 클래스 cloud2는 아래에 설명된 속성과 함께 적용됩니다.-
- “ .cloud2 ”는 cloud2 클래스에 액세스하는 데 사용됩니다.
- “ 배경 이미지 ” 속성은 url(/images/cloud.png)로 설정되며, 여기서 이미지는 cloud.png 이미지가 포함된 폴더입니다.
- “ 배경 크기 ”에는 이미지의 가시성을 확인하는 값이 포함되어 있습니다.
- “ 배경 반복 ” 속성에 값을 반복 없음으로 설정하면 이미지가 반복되지 않음으로 표시됩니다.
- “ 위치 ”는 부모의 요소를 기준으로 이미지를 절대 위치로 지정합니다.
- “ 맨 위 ” 속성은 이미지를 상단에서 100px로 설정합니다.
- “ 너비 ”속성은 div 요소의 너비를 설정하는 데 사용됩니다.
- “ 키 ”속성은 div 요소의 높이를 설정하는 데 사용됩니다.
- “ 생기 ”에는 cloudanimation2라는 이름이 지정됩니다.
- “ 애니메이션 기간 ”는 애니메이션의 지속 시간을 나타냅니다.
- “ 애니메이션 반복 횟수 ”에는 무한 값이 할당되어 애니메이션을 무한 반복합니다.
cloudanimation1에 @keyframes 지정
@ 키프레임 클라우드 애니메이션1 {
에게 {
왼쪽: 0px;
}
~에서 {
왼쪽: 100 % ;
}
}
cloud1 div는 아래에 설명된 애니메이션과 바인딩됩니다.-
- “ @keyframes 클라우드 애니메이션1 ” 애니메이션 cloudanimation1의 이름 뒤에는 전환을 지정하는 데 사용되는 @keyframes 키워드가 옵니다.
- @keyframes 키워드는 클라우드 이미지에서 처음부터 끝까지 애니메이션이 수행되는 방식을 지정합니다.
- “ 에게 ' 그리고 ' ~에서 ”키워드는 cloud1이 화면의 100%에서 0px로 이동하도록 지정합니다.
cloudanimation2에 @keyframes 지정
@ 키프레임 클라우드 애니메이션2 {
0 % {
왼쪽: 0 % ;
}
100 % {
왼쪽: 100 % ;
}
}
div 클래스 cloud2는 아래에 설명된 애니메이션과 연결되어 있습니다.-
- “ @keyframes 클라우드 애니메이션2 ”는 애니메이션 이름 cloudanimation2와 애니메이션을 지정하는 데 사용되는 키워드 @keyframes를 나타냅니다.
- “ 0% ' 그리고 ' 100% ”는 애니메이션의 시작과 끝을 나타냅니다.
- 애니메이션의 0%에서 구름은 값이 0%로 설정된 왼쪽에 있고 점차 너비의 100%로 이동합니다.
산출
멋지다! @keyframes 키워드를 성공적으로 사용하여 요소에 애니메이션을 지정하는 방법에 대해 논의했습니다.결론
CSS를 사용하면 HTML 요소에 스타일을 적용할 수 있습니다. CSS의 애니메이션은 한 스타일에서 다른 스타일로의 전환을 수행합니다. 애니메이션 스타일과 키프레임의 두 가지 구성 요소로 구성됩니다. 애니메이션 스타일은 이름, 애니메이션 기간, 애니메이션 반복 횟수 등과 같은 다양한 속성을 나타냅니다. 반면 키프레임 구성 요소는 애니메이션의 시작과 끝을 정의합니다. 이 가이드는 예제를 통해 애니메이션 키프레임을 설정하는 방법에 대해 자세히 설명했습니다.
- 클래스 이름이 '인