CSS로 애니메이션하는 방법
게시 됨: 2014-12-27우리는 웹사이트에서 애니메이션을 보고 웹 디자인에 가져오는 에너지와 다양성을 즐기는 데 꽤 익숙해졌습니다. 사이트에 시각적인 흥미를 더하고 일반적으로 사용자의 경험을 더욱 흥미롭게 만드는 훌륭한 방법입니다.
전통적으로 GIF, SVG, WebGL 및 배경 비디오를 사용하여 달성했지만 애니메이션은 CSS를 사용하여 효율적으로 생성할 수도 있습니다. CSS 애니메이션에 대한 브라우저 지원이 크게 향상되었으며 널리 보급되고 있습니다. 호환되는 브라우저에는 Firefox 5+, IE 10+, Chrome, Safari 4+ 및 Opera 12+가 있습니다.
오늘은 단계별 데모를 통해 CSS 애니메이션을 만드는 기본 사항을 안내해 드리겠습니다. 그 후에 계속해서 애니메이션의 다섯 가지 예를 확인하십시오. 이 모든 아이디어를 사용하여 자신의 프로젝트를 위한 애니메이션을 만들 수 있습니다!
CSS 애니메이션 기본
분명히 5가지 재미있는 CSS 애니메이션을 살펴보기 전에 애니메이션 작동 방식에 대한 기본 사항을 다루는 것이 중요합니다.
예를 들어 키프레임은 CSS 애니메이션의 핵심 구성 요소입니다. Adobe Flash를 사용해 보거나 비디오 편집 경험이 있는 경우 이 용어에 익숙할 것입니다. 이 경우 키프레임이라는 용어는 여러분이 생각하는 바로 그 것입니다. 특정 동작을 지정하는 방법입니다.
이전에 CSS 스타일시트에서 @keyframes 를 본 적이 있을 것입니다. 이 @keyframes 내부는 애니메이션의 스타일과 단계를 정의하는 곳입니다. 다음은 페이드아웃 효과의 좋은 예입니다.
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}방금 만든 페이드아웃 키프레임의 기본 사항은 다음과 같습니다.
- 설명적인 이름: 이 경우에는 fadeOut입니다.
- 애니메이션의 단계: 시작은 0%로, 끝은 100%로 설정되었습니다.
- 각 단계에서 적용될 CSS 스타일.
기본적으로 From 은 0%이고 To 는 100%입니다. 이 예에서는 다른 단계가 지정되어 있지 않기 때문입니다.
애니메이션 하위 속성이 있는 특정 작업
스타일을 지정하기 위해 조금 더 해야 합니다. 하위 속성으로 animation 속성의 스타일을 지정해야 합니다. 키프레임이 애니메이션의 모양을 정의하는 경우 애니메이션 하위 속성은 애니메이션에 대한 특정 규칙을 정의합니다. 이를 통해 애니메이션 시퀀스가 어떻게 진행되어야 하는지에 대한 타이밍, 지속 시간 및 기타 주요 세부 정보를 구성할 수 있습니다.
animation 속성은 CSS 선택기 내에서 @keyframes 를 호출하는 데 사용됩니다. 애니메이션은 종종 하나 이상의 하위 속성을 가질 수 있습니다. 다음은 하위 속성의 예입니다.
모션 그래픽 아티스트와의 파트너십
애니메이션만큼 디자인에 생명을 불어넣을 수 있는 것은 없습니다. 그러나 애니메이터나 모션 그래픽 아티스트와 함께 작업한 적이 없다면 모션이 낯선 세계처럼 느껴질 수 있습니다. P에 대해 생각한다면 ...
- Animation-name: 애니메이션의 키프레임을 설명하는
@keyframesat-rule의 이름입니다. 이전 예에서 이름fadeOut은 animation-name의 예입니다. - Animation-duration: 애니메이션이 하나의 전체 주기를 완료하는 데 걸리는 시간입니다.
- 애니메이션 타이밍 기능: 애니메이션의 타이밍 , 특히 애니메이션이 키프레임을 통해 전환되는 방식입니다. 이 기능에는 가속도 곡선을 설정하는 기능이 있습니다. 선형, 이즈, 이즈 인, 이즈-아웃, 이즈-인-아웃 또는 큐빅 베지어가 그 예입니다.
- Animation-delay: 요소가 로드된 시간과 애니메이션 시작 사이의 지연입니다.
- Animation-iteration-count: 애니메이션이 반복되어야 하는 횟수입니다. 애니메이션이 영원히 계속되기를 원하십니까? 무한 을 지정하여 애니메이션을 무기한 반복할 수 있습니다.
- 애니메이션 방향: 애니메이션이 시퀀스를 실행할 때마다 방향을 바꾸거나 시작점으로 재설정하고 자체를 반복해야 하는지 여부.
- Animation-fill-mode: 애니메이션이 실행되기 전후에 적용되는 값입니다.
- Animation-play-state: 이 옵션을 사용하면 애니메이션 시퀀스를 일시 중지하고 다시 시작할 수 있습니다. 예는 없음, 앞으로, 뒤로 또는 둘 다 입니다.
최고의 브라우저 지원을 위한 모든 것
여기에는 많은 일이 있으며 용어가 약간 혼란스러울 수 있습니다. 그러나 이제 우리는 키프레임이 애니메이션의 모양과 다양한 애니메이션 단계를 정의하고 animation 속성이 하위 속성을 사용하여 지연, 방향, 타이밍 등과 같은 애니메이션 옵션을 정의한다는 것을 알고 있습니다.
공급업체 또는 브라우저 접두사에 대해 잘 알고 있을 것입니다. 이는 애니메이션으로 작업할 때 필요합니다. 우리는 최고의 브라우저 지원이 있는지 확인해야 합니다. 다음은 표준 브라우저 접두사입니다.
- 크롬 & 사파리:
-webkit- - 파이어폭스:
-moz- - 인터넷 익스플로러:
-ms-
Internet Explorer 10에는 전환에 대한 접두사가 필요하지 않지만 모든 변환에는 접두사가 필요합니다. Opera는 WebKit 스타일을 인식하기 때문에 적용됩니다.
전환 시작
-
-webkit-transition -
-moz-transition -
transition
변환 시작:
-
-webkit-transform -
-moz-transform -
-ms-transform -
transform
작동 중인 5개의 애니메이션
이제 기본 사항을 다루었으므로 사용할 코드를 만들어 보겠습니다.
애니메이션 1: 원에서 정사각형으로 
첫 번째 항목에 대해 자세히 살펴보고 지금까지 다룬 모든 개념을 확실히 이해할 수 있도록 합시다. 애니메이션은 원으로 시작하여 사각형으로 변합니다.
시작할 div를 만드는 것은 애니메이션을 테스트하는 좋은 방법입니다.
<div class=”animationOne”> </div>
이제 @keyframes 를 설정해 보겠습니다. 정사각형에 4개의 면이 있고 시작점이 0%여야 하기 때문에 이 애니메이션에는 5개의 단계가 있습니다. 아래와 같이 접두사를 사용하지만 나머지 자습서에서는 기본 사항만 사용하여 간단하게 유지합니다.
@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}
@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}
@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}
@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}
이제 몇 가지 스타일을 만들어 각 단계에서 테두리 반경이 어떻게 나타날지 결정해 보겠습니다.
@keyframes circle-to-square {
0% {
border-radius:50%;
}
25% {
border-radius:50% 50% 50% 0;
}
50% {
border-radius:50% 50% 0 0;
}
75% {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}
이제 애니메이션의 각 단계를 구별하는 데 도움이 되도록 background-color 속성을 추가합니다.
@keyframes circle-to-square {
0% {
border-radius:50%;
background-color: #6a9bea;
}
25% {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50% {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75% {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}
마지막으로 테스트 div에 애니메이션을 적용해 보겠습니다.
.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}
animation 속성은 일반적으로 약식으로 작성되므로 코드에서 실제로 진행되는 작업은 다음과 같습니다.
- animation-name은
circle-to-square입니다. - 애니메이션 지속 시간은
2s입니다. - 애니메이션 지연은
1s입니다. - animation-iteration-count는
infinite이므로 무한정 계속됩니다. - 그리고 애니메이션 방향은
alternate입니다. 즉, 처음부터 끝까지 재생하고 처음으로 돌아갑니다.
애니메이션 2: 회전 
이 애니메이션은 개체의 회전을 허용합니다.
@keyframes full-rotate {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(45deg);
}
50% {
transform: rotate(90deg);
}
75% {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}
애니메이션 프로젝트를 별도로 유지하려면 이 두 번째 예제에 대해 다른 div를 만드는 것을 잊지 마십시오. 이 예제에서는 div 자체에 애니메이션을 추가할 것이기 때문에 배경색을 추가했습니다.
이 애니메이션의 지속 시간은 2초이며 지연 시간은 3초입니다. animation-iteration-count는 5이므로 이 프로젝트는 중지되기 전에 5번 애니메이션됩니다. 애니메이션은 홀수 시간(1,3,5,… )마다 반대로 재생되고 짝수 시간(2,4,6,… )마다 일반 방향으로 재생됩니다.
.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}
애니메이션 3: 확장 및 깜박임 
이것은 페이지의 다른 요소에 비해 더 눈길을 끌고 눈에 잘 띄기 때문에 버튼에 대한 훌륭한 애니메이션입니다. 이것은 또한 :hover 상태에 포함할 가치가 있는 것일 수 있습니다.
@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}
이것을 테스트하려면 다음 스타터 div가 필요합니다.
.animationThree {
width: 200px;
height: 200px;
}
<div class=”animationThree>
<a class="btn pulse" href="">Click me</a>
</div>
애니메이션 4: 텍스트 슬라이드
텍스트에 애니메이션을 추가해 보겠습니다. 이 프로젝트는 텍스트를 왼쪽에서 한 번 밀어 넣습니다. 
@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}
to {
margin-left: 0%;
width: 100%;
}
}
h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}
애니메이션 5: 페이드 인 
서프라이즈 콘텐츠가 있나요? 나중에 표시하고 싶은 콘텐츠에 대한 이 페이드 인 애니메이션을 확인하십시오. 여기에는 많은 옵션이 있습니다. 페이드 인은 빠르거나 느릴 수 있고, 한 번 또는 여러 번 발생할 수 있습니다.
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animationFive {
width: 200px;
height: 200px;
}
.animationFive img{
animation-name: fade;
animation-duration: 3s;
}
<div class=”animationFive”>
<img src=".." />
</div>
CSS3 애니메이션은 웹사이트를 움직이고 그루브하는 데 환상적입니다! 이제 애니메이션 제작에 대한 기본 개념을 갖추었으므로 애니메이션 가능성은 무궁무진합니다. 무엇을 애니메이션으로 만들 것인가?