CSS3 전환 및 변환을 사용하여 애니메이션을 만드는 방법

변형 및 전환을 사용하여 CSS3로 흥미로운 애니메이션을 만들 수 있습니다. 변환은 한 상태에서 다른 상태로 요소를 변경하는 데 사용됩니다. 예를 들면 요소 회전, 이동, 기울이기 및 크기 조정이 있습니다. 전환이 없으면 변환되는 요소가 한 상태에서 다른 상태로 갑자기 변경됩니다. 이를 방지하기 위해 전환을 추가하여 변경 사항을 제어하여 더 부드럽게 보이게 할 수 있습니다.

CSS3 변환을 사용하는 방법

일반적으로 사용되는 변환에는 몇 가지 유형이 있습니다. 이 튜토리얼에서는 2D 예제에 중점을 둘 것이지만 3D 변환으로도 멋진 작업을 수행할 수 있다는 점을 알아두는 것이 좋습니다. (2D를 마스터하면 3D가 훨씬 쉬워집니다!)

다음 예에서 원래 사각형은 더 어두운 녹색이고 변환된 사각형은 조금 더 투명합니다.

번역하다

translate() 메서드는 요소를 현재 위치에서 새 위치로 이동합니다.
이 코드를 사용하면 조정된 사각형이 현재 위치에서 오른쪽으로 40픽셀, 아래로 100픽셀 이동합니다.

 -ms-transform: translate(40px, 100px); /* IE 9 */
    -webkit-transform: translate(40px, 100px); /* Safari */
    transform: translate(40px, 100px);

회전

rotate() 메서드는 요소를 지정된 각도 값만큼 시계 방향 또는 시계 반대 방향으로 회전합니다. 이 코드는 사각형을 시계 방향으로 40도 회전합니다.

-ms-transform: rotate(40deg); /* IE 9 */
    -webkit-transform: rotate(40deg); /* Safari */
    transform: rotate(40deg);

규모

scale() 메서드는 요소의 크기를 늘리거나 줄입니다(너비와 높이에 대해 지정된 매개변수에 따라). 이 예에서 조정된 사각형은 원래 너비보다 2배, 원래 높이보다 3배 더 큽니다.

 -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);

SkewX

skewX() 를 사용하면 x축만 영향을 받습니다. 이 직사각형은 x축을 따라 30도 기울어져 있습니다.

  -ms-transform: skewX(30deg); /* IE 9 */
    -webkit-transform: skewX(30deg); /* Safari */
    transform: skewX(30deg);

스큐

이것은 같은 생각이지만 y축에 있습니다. skewY() 메서드는 정의된 각도만큼 y축을 따라 요소를 기울입니다. 이 직사각형은 y축을 따라 30도 기울어져 있습니다.

-ms-transform: skewY(30deg); /* IE 9 */
    -webkit-transform: skewY(30deg); /* Safari */
    transform: skewY(30deg);
}

비스듬한

x축과 y축을 모두 기울이려면 한 곳에서 수행할 수 있습니다. skew() 메서드는 지정된 각도를 사용하여 x 및 y축을 따라 요소를 기울입니다. 다음 예제에서는 사각형 요소를 x축을 따라 30도, x축을 따라 20도 기울입니다.

-ms-transform: skew(30deg, 20deg); /* IE 9 */
    -webkit-transform: skew(30deg, 20deg); /* Safari */
    transform: skew(30deg, 20deg);

행렬

이것은 상황이 흥미롭지 만 올바른 상황에서 더 효율적입니다. 많은 변환을 수행하고 개별적으로 모두 작성하고 싶지 않은 경우 이러한 2D 변환을 matrix() 메서드와 결합할 수 있습니다.

따라야 할 기본 개요는 다음과 같습니다.

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

매트릭스의 값을 알아내려면 약간의 연구가 필요합니다. 다음은 시작하는 데 도움이 되는 가이드입니다.

이 예를 만들기 위한 행렬 값은 다음과 같습니다.

  -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(2, -0.3, 0, 1, 0, 0);

CSS3 전환을 사용하는 방법

변환을 다루었으므로 변환과 함께 자주 사용된다는 점에 유의해야 합니다. 이것은 다음 디자인 예제에서 더 이해가 될 것입니다.

원하는 대로 요소의 두 상태 사이를 전환하도록 값을 사용자 지정할 수 있다는 점을 기억하는 것이 좋습니다. CSS 속성을 변경할 때 애니메이션 속도를 제어하는 ​​방법으로 생각하십시오. 한 가지 예는 버튼 위로 마우스를 가져가는 경우입니다. 마우스를 가져가면 빠르게 어두워지는 것이 아니라 "느린 어두워짐"이 나타나는 것이 일반적입니다. 이 "느린 어두워짐"은 전환으로 만들어졌습니다.

많은 값을 지정하는 경우 속기가 편리합니다. transition CSS 속성은 transition-property , transition-duration , transition-timing-function 및 transition-delay 의 약식 속성입니다.

전환 세부정보

transition-property 는 개별 속성에 전환을 적용할 수 있으므로 전환이 적용될 CSS 속성을 지정합니다. 개별 속성에 전환을 적용하는 예는 배경이나 변형에 있습니다. 사이트의 모든 속성을 대상으로 하려면 transform 속성을 all 로 설정할 수 있습니다.

transition-duration 은 속성의 변경이 즉시 발생하지 않고 지정된 시간 동안 발생하도록 하는 데 유용합니다. 가능한 값으로 초와 밀리초가 표시됩니다.

transition-duration: 7s;
transition-duration: 120ms;
transition-duration: 2s, 3s;
transition-duration: 10s, 30s, 230ms;

transition-timing-function CSS 속성을 사용하면 가속 곡선을 설정할 수 있으므로 전환 속도가 지속 시간에 따라 달라질 수 있습니다. 실험할 수 있는 많은 옵션이 있습니다.

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

transition-delay 는 꽤 자명합니다. 지정된 값은 전환 효과가 시작되기 전에 대기할 초 또는 밀리초 수를 설정합니다. Initial 은 속성을 기본값으로 설정합니다. inherit 이 지정되면 부모 요소에서 속성을 상속함을 의미합니다.

Here are all the properties:
transition-property: background; //all
  transition-duration: 1s;
  transition-timing-function: linear; //other options are ease
  transition-delay: 0.5s;

다음은 전환에 대한 기본 약식 설정입니다.

div {
  transition: [property] [duration] [timing-function] [delay];
}

전체 단축 시퀀스:

div {
  transition: background 1s linear 0.5s;
}

애니메이션 기획

정말 상세한 애니메이션을 만들기 전에 완전히 미친 것을 만들기 전에 한 걸음 물러나는 것이 좋습니다(특히 웹에서 공개되는 경우). 재미있는 감각을 더하는 데는 아무런 문제가 없지만 지나치게 애니메이션화하고 싶은 유혹이 있습니다. 당신이 만드는 움직임은 의미를 전달하고 사용자 경험을 향상시켜야 합니다. 즉, 생성할 시간입니다!

이 튜토리얼에는 애니메이션을 보여주기 위해 애니메이션 gif가 있다는 것을 말하고 싶습니다. gif는 일반적으로 디자인에 대해 수행되지 않는 반복됩니다. 그것들을 반복하는 목적은 단지 시연을 위한 것입니다.

CSS 변형 속성으로 이미지 이동

복잡한 변환과 전환에 들어가기 전에 축 그리드의 좌표에 대해 이야기합시다. (주의: 이것은 수학 수업에서 모눈종이에 대한 기억을 불러일으킬 수 있습니다.) 좌표는 이미지를 이동하는 데 사용됩니다.

X 및 Y 좌표

상황이 예상과 약간 다르게 보일 것입니다. -y 값은 x축 위에 있습니다. HTML과 CSS는 웹 페이지가 왼쪽 위에서 시작하여 아래로 읽기 때문에 "역 데카르트 좌표계"라는 것을 사용합니다.

애니메이션 1: 수평 이동을 통한 기본 변환

우리는 translate()에 대한 기본과 요소를 이동하는 방법에 대해 간단히 설명했습니다. 실제로 적용하면 말 그대로 보트를 띄울 수 있습니다. 위에서 배운 것처럼 translate() 메서드는 현재 위치에서 요소를 이동합니다(x축 및 y축에 대해 지정된 매개변수에 따라).

첫 번째 프로젝트는 잠수함 그래픽을 움직이는 것입니다. 잠수함은 가끔씩 공중에 떠야 하므로 translate() 로 조심스럽게 스타일을 지정할 것입니다.

transform: translate(x,y) 를 사용하여 초기 위치에서 이동하려면 두 개의 새 값을 지정해야 합니다. 잠수함이 오른쪽 위로 움직이게 하려면 x 값은 양수이고 y 값은 음수여야 합니다. y 값을 0으로 설정하면 위쪽이 아닌 오른쪽으로만 이동합니다.

transform()을 사용하여 공중으로 올라가는 잠수함

이 예에서는 개체를 오른쪽으로 200px, 위로 25px 이동합니다. 구문은 transform: translate(200px,-25px); 그리고 개체는 .underwater 의 호버에서 이동합니다. .underwater:hover .move-right 에서 움직임에 대한 스타일을 생성하면 호버에서 작업이 발생합니다.

시작 HTML은 다음과 같습니다.

<div class="underwater">
  <div class="object submarine move-right">
  	<!-- image is set as a background image on submarine -->
  </div>
</div>

Codepen에서 이것을 참조하십시오.

이 기본 애니메이션을 만드는 데 실제로 많은 CSS가 필요하지 않습니다.

.underwater {
  position: relative;
  min-height: 600px;
  background-color: #4fc3da;
}

.underwater:hover .move-right{
    transform: translate( 200px ,-25px );
    -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/
    -ms-transform: translate( 200px ,-25px ); /** Firefox **/
}

.submarine {
  height: 200px;
  background: url("little-submarine.svg") no-repeat;
}

.object {
  transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -ms-transition: all 2s ease-in-out; /** Opera **/
}

보시다시피 좌표는 오른쪽 상단 사각형이 됩니다. 호버링 시 잠수함은 변환으로 인해 새 좌표로 이동합니다.

전환으로 인해 상황이 매끄럽게 보입니다. transition-duration 은 2sec 로 설정되었습니다. 이것은 이 애니메이션에 너무 빠르지 않습니다. transition-timing-function 은 더 느린 시작과 끝을 제공하는 ease-in-out 으로 설정되었습니다. 지속 시간이 더 큰 것으로 증가하면 이는 매우 명백할 것입니다.

기본 애니메이션 2: 키프레임과 애니메이션을 사용한 수평 이동

Transform은 이 예에서 약간 다르게 사용됩니다. 키프레임과 애니메이션 속성은 다음 애니메이션을 만드는 데 활용됩니다.

키프레임 기본 사항

@keyframes 내부는 애니메이션의 스타일과 단계를 정의하는 곳입니다. 다음은 "아래로 이동하는 동안 페이드 인" 효과를 주는 데 도움이 되는 사용할 예입니다.

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translate(0, 0);
  }

  100% {
    opacity: 1;
    transform: translate(0, 30px);
  }
}

변환 값은 키프레임에 통합됩니다. 원래 배치는 0%로 설정되고 100%에서는 위치가 30px 아래로 이동합니다.

애니메이션 기초

CSS3 애니메이션을 사용하려면 애니메이션의 키프레임을 지정합니다.

CSS 기능 쿼리를 사용하는 방법

웹 디자인의 세계는 끊임없이 변화하고 있으며 CSS의 새로운 디자인 트렌드를 따라가는 것은 흥미진진합니다. CSS 얼리 어답터라면 이미 CSS 그리드와 같은 기능을 사용하기를 고대하고 있을 것입니다.

위에서 설계된 것처럼 @keyframes 는 특정 시간에 요소가 가질 스타일을 보유합니다.

이 작업을 수행할 때마다 애니메이션에 설명적인 이름을 지정해야 합니다. 이 경우, 우리는 fadeOut 을 사용하고 있습니다. fadeOut 을 포함하는 모든 클래스가 적용됩니다. 애니메이션 단계에서 "from"은 0%로 설정되고 "to"는 100%로 설정됩니다. 이 예제는 두 단계만으로 매우 간단하지만 그 사이에 더 많은 단계가 추가될 수 있습니다.

애니메이션 하위 속성이 있는 특정 작업

animation 속성은 CSS 선택기 내에서 @keyframes 를 호출하는 데 사용됩니다. 애니메이션은 종종 하나 이상의 하위 속성을 가질 수 있습니다.

키프레임은 애니메이션의 모양을 정의합니다. 하위 속성은 애니메이션에 대한 특정 규칙을 정의합니다. 애니메이션 시퀀스가 ​​어떻게 진행되어야 하는지에 대한 타이밍, 지속 시간 및 기타 주요 세부 정보는 모두 하위 속성에 포함됩니다.

다음은 애니메이션 하위 속성의 몇 가지 예입니다.

• Animation-name: 애니메이션의 키프레임을 설명하는 @keyframesat-rule 의 이름입니다. 이전 예에서 이름 fadeOut 은 animation-name 의 예입니다.
• Animation-duration: 애니메이션이 하나의 전체 주기를 완료하는 데 걸리는 시간입니다.
• 애니메이션 타이밍 기능: 애니메이션의 타이밍, 특히 애니메이션이 키프레임을 통해 전환되는 방식입니다. 이 기능에는 가속도 곡선을 설정하는 기능이 있습니다. 예를 들면 linear , ease , ease-in , ease-out , ease-in-out 또는 cubic-bezier 있습니다.
• Animation-delay: 요소가 로드된 시간과 애니메이션 시작 사이의 지연입니다.
• Animation-iteration-count: 애니메이션이 반복되어야 하는 횟수입니다. 애니메이션이 영원히 계속되기를 원하십니까? infinite 을 지정하여 애니메이션을 무기한 반복할 수 있습니다.
• 애니메이션 방향: 애니메이션이 시퀀스를 실행할 때마다 방향을 바꾸거나 시작점으로 재설정하고 반복해야 하는지 여부를 결정합니다.
• Animation-fill-mode: 애니메이션이 실행되기 전후에 적용되는 값입니다.
• 애니메이션 재생 상태: 이 옵션을 사용하면 애니메이션 시퀀스를 일시 중지하고 다시 시작할 수 있습니다. 예는 none , forwards , backwards 또는 both 입니다.

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

약식으로 작성하면 다음과 같습니다.

animation: 4s ease-in-out 1 paused fadeInDown;

다음은 HTML 구조입니다.

<div class="underwater">

    <div class="content-wrap fadeInDown">

    <div class="submarine"></div>

      <h2>Cute Submarine</h2>

      <p>Text here.</p>

    </div>

</div>

fadeInDown 클래스는 잠수함과 콘텐츠를 위아래로 움직이게 합니다.

키프레임을 조정하여 애니메이션을 부드럽게 만들기

몇 개의 키프레임을 더 사용하면 애니메이션을 훨씬 더 부드럽게 만들 수 있습니다.

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(5px);
  }

  25% {
    opacity: .9;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: .9;
    transform: translateY(0);
  }
}

Codepen에서 이것을 참조하십시오.

애니메이션의 타이밍 조정

더 많은 키프레임을 추가하면 애니메이션을 부드럽게 만드는 데 도움이 되었지만 모든 텍스트가 포함된 div에 더 많은 키프레임과 텍스트 지연을 사용하여 상호 작용을 조금 더 추가할 수 있습니다. 잠수함이 텍스트에서 튀어오르게 하는 것은 재미있는 효과이므로 잠수함의 움직임에 맞춰 지연을 설정하면 가능합니다.

HTML에는 효과적인 클래스가 적용됩니다.

<div class="underwater">

    <div class="submarine move-down fadeInDown"> </div>

    <div class="moving-content move-down text-delay fadeInDownText">

      <p>Text goes here.</p>

    </div>

</div>

다음은 대화형 애니메이션을 허용하는 업데이트된 CSS입니다.

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  25% {
    opacity: 1;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDownText {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(35px);
  }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.fadeInDownText {
    -webkit-animation-name: fadeInDownText;
    animation-name: fadeInDownText;
}

 .move-down{
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.text-delay {
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

Codepen에서 이것을 참조하십시오.

CSS3 애니메이션의 큐빅 베지어 진행률 표시줄

진행률 표시줄을 만들어 애니메이션 진행 상황을 축하할 시간입니다!

우리가 다룬 모든 개념은 함께 모여 이와 같은 것을 만들 것입니다. 진행률 표시줄은 매우 일반적인 UI 요소이므로 이와 같은 기능을 생성하면 다른 웹 요소에 애니메이션을 적용하는 방법을 확인하는 데 도움이 됩니다.

시작 HTML은 다음과 같습니다.

<div class="container">
  <div class="row">
    <div class="masthead">
      <p>CSS3 Loading Bar</p>
    </div>
  </div>
 <div class="fast-loader"></div>
</div>

그리고 CSS를 구현하기 위해:

@keyframes speedSetting {
  0% { width: 0px; }
  100% { width: 100%; }
}

@keyframes progressMotion {
  0% { opacity: 1; }
  50% {opacity: 1; }
  100% { opacity: 0; }
}

.fast-loader {
  width: 0px;
  height: 10px;
  background: linear-gradient(to left, blue,rgba(255,255,255,.0));
  animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
-webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
}

첫 번째 키프레임 세트에서 너비는 0%에서 100%로 2초 동안 지속됩니다. progressMotion 의 키프레임이 불투명도를 제어합니다.

CSS 베지어 곡선

cubic-bezier() 함수를 transition-timing-function 속성과 함께 사용하여 지속 시간 동안 전환 속도가 변경되는 방식을 제어할 수 있습니다. 애니메이션에서 볼 수 있습니다. 약간 느리게 시작하여 속도를 높이는 방법을 참조하십시오.

베지어 래퍼를 정사각형으로 그리는 것이 도움이 됩니다. 좌하단과 우상단은 키포인트가 있는 곳으로 P0, P3입니다. 이들은 항상 (0,0) 및 (1,1)로 설정되며 변경되지 않습니다. 그러나 x 또는 y 값으로 새 점을 지정하면 P1 및 P2를 cubic-bezier() 함수로 이동할 수 있습니다.

• x1은 제어점 p1의 x 좌표입니다.
• y1은 제어점 p1의 y 좌표입니다.
• x2는 제어점 p2의 x 좌표입니다.
• y2는 제어점 p2의 y 좌표입니다.

다음은 몇 가지 예시 값입니다.

x1 = .7
y1 = .16
x2 = .2
y2 = .9

따라서 예는 다음과 같을 수 있습니다.

cubic-bezier(.7,.16,.2,.9)

진행률 표시줄은 베지어가 애니메이션 타이밍을 사용자 지정할 수 있는 방법을 보여주는 좋은 예입니다. 변형, 전환 및 기타 여러 옵션을 사용하여 사용자 지정 애니메이션을 쉽게 만들 수 있습니다. 이러한 기본 CSS3 애니메이션 예제를 보고 다른 가능성이 무엇인지 확인하는 데 도움이 되었기를 바랍니다.

What's next: 당신이 좋아할 WordPress 플러그인

개발자를 위한 가장 권장되는 플러그인 목록을 보려면 이 eBook을 다운로드하십시오! 우리는 이 모든 플러그인이 사용하기 간편하고 사이트에서 성능이 너무 무겁지 않으며 완전히 신뢰할 수 있다는 것을 발견했습니다.