CSS의 애니메이션 및 키프레임 소개

10752 단어 tutorialcssbeginners
최근 관심을 갖게 된 주제는 CSS를 사용하여 애니메이션을 적용하는 방법입니다. 완전히 낯설지는 않지만 이전 프로젝트에서 사용한 적이 있지만 실제보다 훨씬 더 어려울 것이라고 생각하여 사용하기를 주저했습니다. 그림을 이동.

오늘 저는 CSS를 사용하여 나만의 개인(기본) 애니메이션을 구축하는 방법을 분석하고 싶습니다.

빠른 설정



저는 사각형과 원의 두 가지 기본 도형을 가지고 놀 것입니다. 내 프로젝트에 있는 것은 index.html 파일과 styles.css 파일뿐이며 물론 스타일시트를 인덱스에 연결했습니다.

내 HTML 본문은 다음과 같습니다.

<body>
    <div class="blue-box"></div>
    <div class="red-circle"></div>
</body>


내 스타일 시트는 다음과 같습니다.

body {
    margin: auto;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.blue-box {
    height: 200px;
    width: 200px;
    background-color: blue;
}


.red-circle {
    height: 200px;
    width: 200px;
    background-color: red;
    border-radius: 50%;
}


다음과 같아야 합니다.


일부 애니메이션으로 재생을 시작할 준비가 모두 끝났습니다.

키프레임



당신이 묻는 키프레임은 무엇입니까? 애니메이션이 시퀀스의 특정 키프레임(체크포인트 생각)에서 진행되는 방식을 지정하는 데 사용하는 CSS 규칙입니다. 원하는 경우 애니메이션의 방향.

CSS 파일에서 키프레임 애니메이션을 만들려면 @keyframes at-rule을 사용한 다음 이름을 지정합니다. 이것은 나중에 호출하는 이름이 되므로 자기 설명적이어야 합니다.

여기에서 애니메이션이 수행해야 하는 작업과 관련하여 값을 할당할 수 있습니다. 더 많은 제어(및 내 개인 취향)를 위해 대신 여러 백분율을 사용할 수도 있습니다.

예시:

@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Percentage Version */

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(180deg)

    100% {
        transform: rotate(180deg);
    }
}


백분율 버전에서 애니메이션이 50% 키프레임 또는 해당 문제에 대한 임의의 키프레임에 있을 위치를 지정할 수 있는 방법에 주목하십시오. 훨씬 더 많은 제어. 2단계 애니메이션인 경우 반드시 from 및 to를 사용하지만 더 많은 사용자 지정 애니메이션의 경우 백분율을 사용하는 것이 좋습니다.

애니메이션 사용



할당한 항목을 360도로 회전시키는 키프레임 애니메이션을 만들었으니 구현 방법을 확인하겠습니다.

애니메이션으로 작업할 수 있는 여러 속성이 있지만 지금까지 본 세 가지 주요 속성을 살펴보겠습니다.
  • animation-name: 생성된 애니메이션의 이름을 사용합니다.
  • animation-duration: 애니메이션이 전체적으로 지속되기를 원하는 시간입니다.
  • animation-iteration-count: 애니메이션을 반복할 횟수입니다.

    • 이것이 파란색 상자에 어떻게 표시되는지 확인해 보겠습니다.

    .blue-box {
    height: 200px;
    width: 200px;
    background-color: blue;
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}


    따라가다 보면 이제 상자가 무한히 회전하고 전체 360 회전 애니메이션을 만드는 데 5초가 걸린다는 것을 알 수 있습니다.

    다음과 같은 멋진 속기 형식도 있습니다.

    animation: name duration timing-function


    이제 우리의 규칙은 다음과 같을 수 있습니다.

    .blue-box {
    height: 200px;
    width: 200px;
    background-color: blue;
    animation: rotate 5s infinite;
}


    ... 그리고 똑같이 작동합니다!

    몇 가지 더 많은 애니메이션



    이제 키프레임 애니메이션을 만들고 사용하는 방법에 대한 아이디어를 얻었으니 몇 가지 빠른 애니메이션을 확인해 봅시다.

    @keyframes color-changer {
    0% {
        background-color: red;
    }

    50% {
        background-color: green;
    }

    100% {
        background-color: blue;
    }
}

@keyframes pulsate {
    0% {
        width: 200px;
        height: 200px;
    }

    50% {
        width: 250px;
        height: 250px;
    }

    100% {
        width: 200px;
        height: 200px;
    }
}


    다시 말하지만 이러한 이름은 수행하는 작업에 대해 설명적이어야 합니다. 첫 번째는 RGB를 순환하고 두 번째는 요소를 진동시킵니다.

    단일 요소에서 두 가지를 모두 사용할 수 있는 방법을 보여주기 위해 두 개를 만들었습니다. 이번에는 빨간색 원으로 작업하겠습니다.

    .red-circle {
    height: 200px;
    width: 200px;
    background-color: red;
    border-radius: 50%;
    animation: pulsate 5s infinite, color-changer 10s 2;
}


    동일한 요소에서 두 애니메이션을 모두 호출하고 각 애니메이션에 대해 서로 다른 규칙 세트를 지정할 수 있음을 보여주기 위해 속기 방법을 사용했습니다.

    이제 빨간색 원이 펄스당 5초의 속도로 무한히 맥동합니다. 또한 회전당 10초의 속도로 색상이 변경되지만 두 번만 발생합니다. 색상 변경 애니메이션 실행이 완료된 후에도 빨간색으로 계속 깜박입니다.

    애니메이트하세요!



    오늘은 키프레임과 애니메이션에 대해 다루겠습니다. 저는 이 도구로 마술을 부릴 수 있는 미친 듯이 창의적이고 재능 있는 사람들이 있다는 사실을 알고 있으며, 여러분은 제가 오늘 소개한 기본 작업보다 훨씬 더 많은 일을 할 수 있다고 확신합니다. 나는 당신이 오늘 새로운 것을 배웠거나 읽기를 즐겼기를 바랍니다. 항상 피드백과 토론에 열려 있지만 다음 시간까지... 즐거운 코딩하세요!
    프런트 개발에서 활발했던 밀카오는 서버 측면에서도 활발했다.
    NextJS/ReactJS에서 sentry 가져오기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage