CSS로 애니메이션을 만드는 방법은 무엇입니까?

소개

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

생기

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

기본 애니메이션

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

<div id="square">Square</div>

여기에서는 파란색 사각형을 만든 다음 몇 가지 스타일을 지정합니다. 어떤 색상이든 다 가능해요!

#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이나 다른 웹사이트에서 애니메이션에 대해 자세히 알아볼 수 있습니다. 이제 animation 속성을 사용하되 다음과 같이 한 줄로 작성하겠습니다.

    animation: color 4s infinite;

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

이제 사각형을 보면 색깔이 계속해서 바뀔 거예요! 이제 색상을 변경하면서 사각형이 움직이도록 만들어 보겠습니다.

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

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

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

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

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

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

    animation: move 4s infinite;

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

결론

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

위 내용은 CSS로 애니메이션을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!