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

게시 됨: 2017-10-09

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

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

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

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

CSS 애니메이션

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

@keyframes 지정

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

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

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

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

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

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

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

element_name
{
animation_property: value;
style_property: value;
}

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

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

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

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}

.stage:hover .object {
 animation: slide 2s linear;	/*shorthand animation property*/
}

.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

전환

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

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

element 
{
style_property: value;
transition_property: value;
}

여기 요소는 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를 5초로 설정하면 됩니다.
  • transition : 위의 모든 transition 속성을 함께 설정하기 위한 단축 속성입니다.

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

div { 
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

애니메이션 대 전환

Animations vs. Transitions

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

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

div {
width: 100px;
height: 100px;
background: red;

/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;

/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

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

결론

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