3가지 놀라운 CSS 애니메이션 팁

반응형

CSS 애니메이션은 웹 페이지를 흥미롭고 흥미롭게 만드는 데 사용할 수 있는 강력한 도구입니다. CSS 애니메이션을 사용하면 제어하기 쉬운 간단한 애니메이션이나 다른 방법으로는 제작하기 어려운 복잡한 애니메이션을 만들 수 있습니다. 이 문서에서는 CSS 애니메이션의 기본 사항에 대해 알아보고 프로젝트에서 CSS 애니메이션을 사용하는 방법에 대해 설명합니다.

당신이 CSS 애니메이션에 대해 알아야 할 첫 번째 사항은 페이지에 있는 요소의 속성을 애니메이션화하여 동작한다는 것입니다. 이러한 속성은 페이지의 요소 위치부터 색상 또는 크기에 이르기까지 모든 것이 될 수 있습니다. 시간이 지남에 따라 변경할 수 있는 방법이 있는 한 원하는 속성을 애니메이션화할 수 있습니다.

애니메이션할 속성을 결정했으면 해당 속성에 대한 키프레임 규칙을 설정해야 합니다. 키프레임 규칙은 애니메이션이 진행되는 동안 각기 다른 시점에서 속성이 어떻게 보이는지 정의합니다. 키 프레임 규칙을 생성하려면 애니메이션을 적용할 속성의 이름을 지정한 다음 콜론(:)을 지정합니다. 그런 다음 애니메이션 시작 시간과 종료 시간에 대한 두 가지 값을 지정합니다. 예는 다음과 같습니다.

div { width: 100px; height: 100px; background-color: blue; }
 @keyframes myAnimation { 0% { width: 100px; height: 50px; 
                              background-color: red;} 50% { width: 200px; height: 150px; 
                                                           background-color: green;} 100% { width: 100px; height: 50px;
                                                                                            background-color: red;} }

 

이 예에서는 div 요소의 너비와 높이를 애니메이션화하고 있습니다. "0%", "50%", "100%"라는 세 가지 키 프레임을 정의했습니다. "0%" 키프레임은 요소의 너비와 높이를 원래 값(100픽셀 폭과 높이)으로 되돌리는 반면 "50%" 키프레임과 "100%" 키프레임은 각각 200픽셀 폭과 150픽셀 높이로 설정한다. 재생 중에 각 키 프레임에 도달하면 브라우저는 다른 키 프레임이나 애니메이션 시퀀스의 끝에 도달할 때까지 그 안에 정의된 스타일을 적용합니다.

필요한 경우 단일 키 프레임 규칙에 여러 속성을 추가할 수도 있습니다. 예를 들어 요소의 너비와 색상을 동시에 애니메이션화하려는 경우 다음과 같은 작업을 수행할 수 있습니다.

@keyframes myAnimation { 0% {width : 100px ; color : black;} 
                        50%{width : 200px ; color : white;} 100%{width : 100px ; 
                                                                 color : black;} } 

이 예에서 요소의 너비는 50% 표시에서 100픽셀에서 200픽셀로 바뀌고 색상은 검은색에서 흰색으로 바뀝니다.

키 프레임 규칙을 작성했으면 HTML 문서에 키 프레임 규칙을 추가해야 합니다. 이렇게 하려면 애니메이션 속성을 사용합니다. 애니메이션 속성은 사용할 키 프레임 규칙의 이름과 애니메이션을 실행할 시간이라는 두 가지 값을 사용합니다. 예는 다음과 같습니다.

 

div { width: 100px; height: 100px; background-color: blue; } 
@keyframes myAnimation { 0% {width: 100px; height: 50px; 
                             background-color: red;} 50% {width: 200px; height: 150px; 
                                                          background-color: green;} 100% {width: 100px; height: 50px; 
                                                                                          background-color: red;} } div{animation : myAnimation 2s;} 

이 예에서는 div 요소에 "애니메이션" 키프레임 규칙을 사용하고 있습니다. 애니메이션이 2초(2000밀리초) 동안 지속되기를 바란다고 브라우저에 알립니다. 필요한 경우 1초의 분수를 지정할 수도 있습니다. 예를 들어, "0.5초"는 500밀리초를 의미합니다.

기본적인 CSS 애니메이션은 여기까지입니다! 몇 줄의 코드만으로 웹 페이지에 흥미와 상호작용을 더하는 단순하거나 복잡한 애니메이션을 만들 수 있습니다.

프런트 엔드 개발에 관한 더 작은 기사는 팔로우해 주시기 바랍니다.

또는 이메일 brianlemba2@gmail.com으로 연락하세요.

 

고마워 ️