소개

오늘은 애니메이션 만드는 방법을 알려드리겠습니다. 이 게시물에서는 필요한 모든 애니메이션 속성을 살펴보겠습니다. 내 github에서 코드를 얻을 수 있습니다. 그럼 시작해보겠습니다!!

생기

애니메이션은 웹 사이트의 모양을 향상시키는 데 사용되는 속성입니다. 이는 사용자에게 좋은 간섭을 제공하고 사람들에게 웹사이트의 목표를 보여주는 데에도 사용됩니다.

기본 애니메이션

첫 번째 애니메이션: 사각형의 색상 변경

Square

여기에서는 파란색 사각형을 만든 다음 몇 가지 스타일을 지정합니다. 어떤 색상이든 선택할 수 있습니다!

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

이제 애니메이션을 만들어 보겠습니다.

1단계: @keyframes 애니메이션 만들기

애니메이션을 만들려면 @keyframes를 설정해야 합니다. 특정 시간에 요소에 어떤 스타일을 부여하고 싶은지 담고 이름을 지정해야 합니다. 제 경우에는 사각형의 색상을 변경하고 있습니다. 그래서 이름을 색상으로 지정합니다. 이제 @keyframes를
와 같은 두 가지 유형으로 작성할 수 있습니다.

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

두 단계로 구성된 애니메이션을 수행하려는 경우 사용할 수 있습니다. 또는
와 같은 백분율 값을 사용하여 수행할 수 있습니다.

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

백분율 값은 애니메이션에서 여러 작업을 수행해야 할 때 사용되지만 둘 다 사용할 수 있습니다! 저는 보통 애니메이션에 백분율 값을 사용합니다.

2단계: 사각형에 애니메이션 속성을 설정합니다.

이제 광장에 애니메이션 속성을 적용하겠습니다. 그러기 위해서는 애니메이션의 속성을 알아야 합니다. 주로 사용되는 것을 알려드리겠습니다:

• animation-name - 사용하려는 @keyframe을 브라우저에 알리는 데 사용됩니다. 제 경우에는 @keyframes 이름이 color입니다.

• animation-duration - 애니메이션이 완료되어야 하는 시간을 알려주는 데 사용됩니다.

• animation-iteration-count - 실행해야 하는 시간을 알려주는 데 사용됩니다.

w3school이나 다른 웹사이트에서 애니메이션에 대해 자세히 알아볼 수 있습니다. 이제 애니메이션 속성을 사용하지만 다음과 같이 한 줄로 작성하겠습니다.

애니메이션: 색상 4s 무한;

    animation: color 4s infinite;

Css의 애니메이션에는 7가지 속성이 있습니다. 한 줄에 애니메이션 속성을 사용하려면 먼저 색상인 animation-name을 쓴 다음 제 경우에는 animation-duration을 4초로 쓰고 animation-iteration-count를 무한으로 설정합니다. 애니메이션을 한 번만 사용하려면 1 로 설정하면 됩니다. 애니메이션 속성 값을 직접 설정할 수도 있습니다.

이제 사각형을 보면 색상이 계속해서 바뀔 것입니다! 이제 색상을 변경하면서 사각형을 움직이게 만들어 보겠습니다.

두 번째 애니메이션 : 색상을 바꾸면서 사각형을 움직여보세요!

이를 위해 동일한 사각형을 사용하고 이를 위해 또 다른 @keyframes를 만들 것입니다. 이전과 동일한 단계를 사용합니다.

1단계: @keyframes 애니메이션 만들기

@키프레임 이동{ 0%{ 왼쪽:0px; 배경색: rgb(14, 202, 202); }50%{ 왼쪽: 300px; 배경색: 분홍색; }100%{ 왼쪽:0px; 배경색: rgb(14, 202, 202); } }

    animation: color 4s infinite;

여기서 move라는 이름으로 @keyframes를 만들고 이 애니메이션에 세 단계를 사용합니다. 먼저 왼쪽을 0px로 설정하고 배경색을 설정했습니다. 그런 다음 50%에서 left를 300px로 설정하고 배경색을 변경하고 마지막으로 다시 left를 0px로 설정하여 첫 번째 위치에 오도록 했습니다.

2단계: 사각형에 애니메이션 속성 설정

애니메이션: 4초를 무한대로 이동합니다.

    animation: color 4s infinite;

여기서 애니메이션 이름을 이동으로 설정한 다음 애니메이션 지속 시간을 4초로, 애니메이션 반복 횟수를 무한으로 설정했습니다. 다시 한 번 선택에 따라 애니메이션 값을 설정할 수 있습니다. 또한 첫 번째 애니메이션 속성에 대해 의견을 제시하는 것을 잊지 마세요. 그렇지 않으면 문제가 발생할 수 있습니다!

결론

글이 너무 길어져서 다음 포스팅에서 이어가겠습니다. 지금은 오늘이면 충분합니다. 나는 당신이 그것을 이해하기를 바랍니다. 애니메이션에 관한 모든 것을 알려드리기 위해 최선을 다하겠습니다. 그리고 다음 글에는 어떤 주제로 써야 할지 댓글로 알려주세요. 읽어 주셔서 감사합니다!