CSS/HTML 초보자이고 CSS 애니메이션에 대해 배우고 싶지만 웹에 있는 엄청난 양의 문서와 자습서에서 길을 잃은 느낌이 든다면 이 게시물이 적합합니다.

이 게시물에서는 CSS/HTML을 사용하여 애니메이션의 기본 개념을 간단하지만 효율적인 방법으로 탐색하고 CSS/HTML만으로 애니메이션을 만드는 방법을 배웁니다.

I- 애니메이션 개체의 동작:

CSS에서 애니메이션은 시간 경과에 따른 객체의 변화를 정의합니다. 이러한 변경 사항을 3가지 범주로 나열할 수 있습니다.
1- 움직임: 물체의 위치가 3차원 공간에서 바뀝니다. X, Y, Z에 따른 평행이동과 회전의 3가지 기본 동작의 구성으로 볼 수 있습니다.
2- 확대, 축소: 개체 크기는 시간이 지남에 따라 변경됩니다.
3- 외관: 개체 속성이 시간이 지남에 따라 어떻게 변경되는지. 이러한 속성은 색상, 불투명도, 모양 등과 같은 개체의 측면과 관련이 있습니다.

훌륭하고 복잡한 애니메이션을 만들기 위한 핵심 전략은 애니메이션 개체의 동작을 연구하고 기본 동작으로 분석하는 것입니다.

II- CSS에서 애니메이션을 표현하는 방법:

CSS에서 애니메이션을 표현할 수 있는 주요 키워드는 "transition", "transform", "animation"및 "@keyframes"입니다.

CSS로 멋진 애니메이션 개체를 만들기 전에 먼저 이러한 키워드의 의미와 구문을 이해해 보겠습니다.

"transform" 키워드를 사용하여 공간에서 개체를 조작합니다.

"변형"속성은 3D 공간에서 개체의 변형을 정의합니다. 3차원 공간에서 애니메이션 개체의 움직임을 조작할 수 있습니다.

이 속성은 개체의 움직임 및 크기 변경과 관련된 많은 값을 허용합니다. 이러한 값은 변환, 회전, 크기 조정과 같은 매개변수화 가능한 변환 함수의 결과입니다.

  .animated_object {
       transform: transformation-function(parameter);
  }

다음 CodePen에서 "transform"속성과 해당 기능을 사용하여 a의 동작을 실험할 수 있습니다. translateX() translateY() translateZ() , rotateX(), rotateY() 및 rotateZ().

"전환" 키워드로 시간 차원 추가:

"transition"속성은 객체의 변환 시점을 명확히 할 수 있게 해주는 약식 키워드입니다. 다음의 조합을 값으로 허용합니다.

전환 속성: 시간 전환을 적용하기 위해 선택한 속성입니다.

전환 기간: 전환 기간의 시간

전환 타이밍 기능: 변환 과정에서 가속도가 어떻게 변하는지 나타냅니다.

전환 지연: 전환이 시작되어야 하는 시점을 나타냅니다.

 .animated_object {
   transition: Transition-property duration timing-function delay;
  }

예시:

 .animated_object {
    transition: all 0.5s ease 0.2s;
  }

Jhey에서 개발한 다음 Codepen은 가장 많이 사용되는 전환 타이밍 기능을 표시합니다.

"애니메이션" 및 "@keyframes" 키워드를 사용하여 개체 동작을 구성합니다.

@keyframes는 애니메이션을 구성할 수 있는 강력한 CSS 규칙입니다. 애니메이션 개체의 동작을 단계별로 지시합니다. 복잡한 애니메이션을 만드는 패턴으로 볼 수 있습니다.

@keyframes는 어떻게 사용합니까?

먼저 다음 코드를 사용하여 규칙을 설정해야 합니다.

 @keyframes my-animation {

 /* From The status of the object at the binging of the animation*/  
    from  { 
            property1 : value;
            property2 : value;
            ...
      }
 /* To The status of the object at the end of the animation*/ 
    to   {
            property1 : new-value;
            property2 : new-value;
            ...
      }
 }

보다 구체적이고 자세한 애니메이션 패턴이 필요한 경우 "%"표기법을 사용할 수 있습니다. 애니메이션 진행의 특정 수준에서 구현할 변경 사항을 나타냅니다.

 @keyframes my-animation {

   /* The status of the object at the binging of the animation*/ 
   0% {          
           property1 : value;
           property2 : value;
           ...
       }

   /* The status of the object when the animation is at 40% of its  progress*/ 
    40% {
          property1 : new value;
          property2 : new value;
           ...       
        }

   ...

 /* The status of the object at the end of the animation*/
   100% {
          property1 : new value;
          property2 : new value;
           ...
     }
 }

이제 애니메이션 패턴을 만들었으므로 애니메이션의 시간 함수를 설정하고 "animation"속성으로 구현해야 합니다.

 .animated_object {  
   animation: my-animation duration timing-function delay;
 }

결론:

애니메이션은 당신의 웹페이지에 화려함과 화려함을 가져다줍니다. 그러나 적당히 사용해야 하며 사용자 경험과 앱 디자인에 잘 적응해야 합니다.
기억하다! 빈티지 아마추어가 아닌 이상 키치한 90년대 웹 페이지를 만들고 싶지 않을 것입니다.



참조:
Css-tricks | W3schools | W3schools | Jhey codePen | Gifs from giphy | Images from Pexel