CSS 애니메이션 및 전환으로 웹 페이지에 생명을 불어넣으세요

게시 됨: 2017-10-09

웹사이트 디자인은 끊임없이 진화하고 있습니다. 반응형 디자인, 아름다운 타이포그래피, 완벽한 색상 코딩 구성표, 일러스트레이션까지 웹 사이트 제작자는 매일 새로운 아이디어와 디자인을 제시하고 있습니다.

오늘날 사용자는 인터넷을 통해 제공되는 고품질 콘텐츠로 인해 사용자 인터페이스에 대한 높은 기대치를 가지고 있습니다. 웹사이트 인터페이스가 발전함에 따라 그 이면의 기술도 발전하고 있습니다. 웹사이트 인터페이스 향상을 담당하는 주요 구성 요소 중 하나는 CSS 입니다.

CSS 또는 Cascading Style Sheets는 스타일, 레이아웃, 디자인을 정의하여 사이트를 훨씬 인터랙티브하게 만드는 역할을 합니다. CSS의 최신 표준인 CSS3는 사용자 인터페이스에 깊이를 추가하여 사용자 경험을 향상시키는 애니메이션 및 변환 개념을 도입했습니다. CSS 애니메이션 및 전환을 사용하여 스토리를 전달하고, 풍성한 효과를 생성하고, 웹사이트와의 사용자 상호 작용을 훨씬 효과적이고 의미 있게 만들 수 있습니다.

애니메이션은 그림과 같은 일련의 개체를 차례로 표시하여 생성되는 움직임의 시뮬레이션일 뿐입니다. 반면에 전환은 기본적으로 개체가 한 상태에서 다른 상태로 변경되는 과정입니다. 그러나 웹 애니메이션에 대해 이야기할 때 기본적으로 CSS 애니메이션 또는 키프레임 애니메이션, CSS 전환 및 JavaScript 애니메이션 의 세 가지 유형이 있습니다.

CSS 애니메이션

CSS에서 애니메이션을 만들려면 일정 기간 동안 이미지나 텍스트와 같은 요소의 CSS 속성을 변경해야 합니다. 요소의 속성을 원하는 만큼 변경할 수 있으며 애니메이션의 지속 시간도 설정할 수 있습니다.

@keyframes 지정

CSS 애니메이션은 키프레임으로 비트 정의됩니다. 이 키프레임은 애니메이션의 중간 지점입니다. 모든 CSS 애니메이션은 @keyframes 규칙에 따라 지정됩니다. 이 키프레임은 특정 순간에 요소에 어떤 일이 발생하는지 지정합니다.

어떤 속성이 변경되고 있는지
요소가 애니메이션될 때
요소가 움직이는 방식

다음과 같이 고유한 키프레임을 정의할 수 있습니다.

[css]
@keyframes animation_name
{
from{ 속성: 값; }
to{ 속성: 값; }
}
[/css]

여기서 'to'와 'from'은 애니메이션의 시작과 끝을 지정합니다. 다음과 같이 시작과 끝 사이의 중간 순간에 대한 애니메이션을 지정할 수도 있습니다.

[css]
@키프레임 이름
{
0%{ 속성: 값; }
50%{ 속성: 값; }
100%{ 속성: 값; }
}
[/css]

여기서 0%는 애니메이션의 시작, 100%는 애니메이션의 끝, 50%는 시작과 끝 사이의 변화를 나타냅니다. 그러나 애니메이션이 발생해야 하는 시간에 대해 브라우저에 어떻게 알릴 수 있습니까? 특정 애니메이션 속성 을 사용하여 이 작업을 수행합니다. 이러한 애니메이션 속성은 애니메이션할 요소와 연결됩니다. 예를 들어:

[css]
element_name
{
animation_property: 값;
style_property: 값;
}
[/css]

여기서 element는 div, span, img, p 등과 같은 HTML 태그일 수 있으며 style_property 는 background_color, width, height 등과 같은 CSS 스타일 속성입니다. 이제 몇 가지 애니메이션 속성을 자세히 살펴보겠습니다.

@keyframes : 키프레임은 위에서 설명한 대로 애니메이션 코드를 지정하는 데 사용됩니다.
animation-name : @keyframes로 지정된 이름은 애니메이션의 이름입니다. 이 이름은 애니메이션할 요소가 있는 키프레임을 참조하는 데 사용됩니다.
animation-duration : 애니메이션의 지속 시간을 초 또는 밀리초 단위로 지정하는 데 사용됩니다. 예를 들어 5초로 설정하면 애니메이션은 5초 동안만 실행됩니다. 이 속성을 설정하지 않으면 기본값이 0이므로 애니메이션이 전혀 실행되지 않습니다.
animation-delay : animation-delay 시간을 지정하여 애니메이션 시작을 지연시킬 수 있습니다. 예를 들어 브라우저에서 페이지가 로드된 후 5초 후에 애니메이션을 시작하려면 animation-delay를 5초로 설정하면 됩니다.
animation-direction : 이 속성을 사용하여 애니메이션이 반대 방향으로 움직이는지 아니면 번갈아 가며 움직이는지 브라우저에 알릴 수 있습니다. 예를 들어 애니메이션을 처음부터 끝까지 실행하려면 animation-duration 값을 'normal'로 설정하십시오. 처음부터 끝까지 실행하려면 값을 'reverse'로 설정하면 됩니다.
animation-fill-mode : 애니메이션이 이 모드로 재생되지 않을 때 요소의 스타일을 지정할 수 있습니다. 즉, 애니메이션이 지연되거나 완료되면 요소의 스타일은 어떻게 되어야 합니다.
animation-iteration-count : 애니메이션을 재생할 수 있는 횟수를 이 속성으로 나타냅니다. 예를 들어 애니메이션을 한 번 재생하려면 1로 설정하고 애니메이션을 영원히 재생하려면 '무한'으로 설정하면 됩니다.
animation-timing-function : 이 속성은 선형, 가속 또는 감속과 같은 애니메이션의 속도 곡선을 지정하는 데 사용됩니다.
Animation : 모든 애니메이션 속성을 설정하기 위한 약식 속성입니다.

예를 들어 다음 코드 조각을 사용하여 튀는 개체에 애니메이션을 적용할 수 있습니다. 여기에서 애니메이션에 대한 속기 표기법이 어떻게 사용되었는지 주목하십시오.

[css]
@keyframes 슬라이드 {
0% {
왼쪽: 0;
상단: 0;
}
50% {
왼쪽: 244px;
상단: 100px;
}
100% {
왼쪽: 488px;
상단: 0;
}
}

.stage:hover .object {
애니메이션: 슬라이드 2s 선형; /*짧은 애니메이션 속성*/
}

.물체 {
배경: #2db34a;
경계 반경: 50%;
높이: 50px;
위치: 절대;
너비: 50px;
}
[/css]

전환

CSS 전환은 이징 기능이라고도 하는 특정 타이밍 기능 을 기반으로 특정 기간 동안 요소의 속성에 적용됩니다. 타이밍 기능이란 선형 진행, 가속 또는 감속과 같이 요소의 속성을 한 상태에서 다른 상태로 변경하는 기능을 의미합니다. 마우스를 올리면 이미지가 미끄러지거나 다른 이미지로 변형되거나 마우스 클릭 시 소리가 재생되는 것을 보았을 것입니다. 이들은 모두 웹사이트를 인터랙티브하게 만들 수 있는 전환 효과입니다.

이징 기능 은 전환을 생성하는 데 중요합니다. 속성이 변경되는 방식을 지정합니다. 또한 속성 값이 전환의 시작점에서 끝점으로 변경되는 속도를 변경할 수도 있습니다. 다음과 같은 방법으로 전환을 적용할 수 있습니다.

[css]
요소
{
style_property: 값;
transition_property: 값;
}
[/css]

여기 요소는 div, H1, img 등과 같이 변환하려는 HTML 요소를 지정합니다. style_property는 해당 요소에 적용된 CSS 스타일입니다. 이제 몇 가지 전환 속성 을 살펴보겠습니다.

transition-property : 너비, 높이, 색상 또는 모양과 같은 요소의 CSS 속성에 항상 전환 효과가 적용됩니다. 이 속성의 값은 요소의 CSS 속성을 지정합니다. 전환 효과는 예를 들어 마우스를 올리거나 클릭할 때 이 속성이 변경될 때마다 시작됩니다.
transition-timing-function : 요소에 적용할 이즈 기능입니다. 이 속성은 이즈 인, 이즈 아웃, 선형 등과 같은 전환 속도 곡선을 지정하는 데 사용됩니다.
transition-duration : animation-duration 속성과 같습니다. 전환 효과의 지속 시간을 초 또는 밀리초 단위로 지정하는 데 사용됩니다. 예를 들어 5초로 설정하면 전환 효과가 5초 안에 완료됩니다. 이 속성을 설정하지 않으면 기본값이 0이므로 전환이 전혀 발생하지 않습니다.
transition-delay : 이 속성을 사용하여 전환 효과를 지연시키는 시간을 지정할 수 있습니다. 예를 들어, 마우스 호버 후 5초 후에 효과를 시작하려면 transition-delay를 5s로 설정하면 됩니다.
transition : 위의 모든 transition 속성을 함께 설정하기 위한 약식 속성입니다.

예를 들어 다음 코드는 마우스를 가져갈 때 div 요소의 너비를 변경합니다. 여기에 적용된 전환 약식 속성을 참조하세요.

[css]
div {
너비: 50px;
높이: 50px;
배경: 파란색;
전환: 높이 4초; /*4초 동안 높이에 대한 약칭 전환*/
}
div:호버 {
높이: 200px; /* 마우스 호버시 높이 증가 */
}
[/css]

애니메이션 대 전환

Animations vs. Transitions

애니메이션과 전환의 유사점

전환과 애니메이션은 모두 요소 속성의 변경 사항을 시각화하는 데 사용됩니다.
전환 및 애니메이션이 발생하는 기간을 지정할 수 있습니다.
전환 및 애니메이션에 대해 한 값에서 다른 값으로 이동하는 속도를 변경하는 특정 타이밍 기능이 있습니다.

애니메이션과 전환의 차이점

CSS 전환은 반응적 입니다. 사용자가 트리거해야 합니다. 반면에 애니메이션은 브라우저에서 페이지가 로드될 때마다 실행됩니다. 트리거할 필요는 없습니다.
전환은 한 번 실행된 다음 중지됩니다. 그런 다음 애니메이션이 반복 될 수 있는 동안 계속해서 트리거해야 합니다. 그들은 자신의 정류장에서 시작한 다음 다시 시작할 수 있습니다.
브라우저는 전환 자체를 처리합니다. 전환의 시작과 끝을 지정하기만 하면 됩니다. 전환 효과를 설정할 수 있지만 그 사이의 전환 변화율을 변경할 수는 없습니다. 예를 들어, 이미지가 마우스를 가져갈 때 슬라이드하는 경우 이미지 위로 마우스를 가져갈 때 페이드 인 또는 페이드 아웃되는 것을 볼 수 있습니다.
반면에 애니메이션은 시작과 끝 사이에 속성을 변경할 수 있는 유연성을 제공합니다. 이것은 키프레임의 도움으로 발생합니다. 예를 들어 이미지의 색상을 처음 5초 동안은 빨간색으로, 다음 5초 동안은 파란색으로, 다음 5초 동안은 녹색으로, 애니메이션의 마지막 5초 동안은 노란색으로 설정할 수 있습니다. 따라서 애니메이션을 제어할 수 있습니다.

공급업체 접두사

모든 CSS3 기능이 모든 브라우저에서 지원되는 것은 아닙니다. 따라서 -webkit-(Safari), -moz-(Firefox) 또는 -o-(Opera)와 같은 특정 브라우저에 대해 해당 CSS 속성과 함께 접두사를 사용합니다. 이렇게 하면 브라우저 마커가 해당 CSS3 기능에 대한 지원을 추가할 수 있습니다. 이러한 접두사를 공급업체 접두사 또는 CSS 브라우저 접두사 라고 합니다. 따라서 애니메이션 및 전환 속성과 함께 공급업체 접두사도 넣어야 합니다. 예를 들어, 아래 코드를 고려하고 Safari의 공급업체 접두사가 어떻게 사용되었는지 확인하십시오.

[css]
div {
너비: 100px;
높이: 100px;
배경: 빨간색;

/* Safari 3.1 ~ 6.0의 경우 */
-webkit-transition-property: 너비;
-webkit-전환-시간: 2초;
-webkit-transition-timing-function: 선형;
-webkit-전환-지연: 1초;

/* 표준 구문 */
전환 속성: 너비;
전환 지속 시간: 2초;
전환 타이밍 기능: 선형;
전환 지연: 1초;
}
[/css]

팁! -prefix-free 와 같은 라이브러리를 사용하면 이러한 번거로움을 피할 수 있습니다. 모든 CSS 코드에 현재 브라우저의 접두사를 추가하는 JavaScript 라이브러리입니다. 웹에서 사용할 수 있는 많은 라이브러리를 확인하십시오.

결론

웹사이트 개발자는 애니메이션과 변형을 적용하여 사용자를 웹사이트로 끌어들일 수 있습니다. 양식, 알림, 배경 그래픽, 이미지, 차트, 기념일 로고, 행동 유도 버튼 등을 향상시키는 데 사용할 수 있습니다. 상상력을 발휘하면 사용자를 놀라게 할 방법을 찾을 수 있습니다. 웹사이트를 조금만 변경해도 웹사이트가 훨씬 더 멋지게 보이고 가치를 높일 수 있다는 사실을 기억하세요. 그래서, 당신은 아직 당신의 웹사이트에 애니메이션을 사용한 적이 있습니까? 애니메이션 및 전환 사용에 대한 생각을 공유하세요.