CSS 애니메이션 시작하기

CSS 전환을 사용하는 방법

그래서 CSS 애니메이션에 대해 더 배우고 싶습니다. CSS 애니메이션은 일단 알게 되면 훌륭하고 간단합니다. 이 예에서는 버튼을 사용하겠습니다. 커서를 이 버튼 위로 가져가면 배경색이 0.3초 동안 변경됩니다.

CSS 애니메이션의 기본 사항은 요소가 background-color: transparent; 와 같은 시작 위치에서 시작한 다음 호버 이벤트 또는 기타 CSS 이벤트가 background-color: red; 와 같은 끝 위치로 변경된다는 것입니다. 이렇게 하려면 애니메이션 지속 시간으로 전환을 설정해야 합니다. 전환을 설정하는 가장 좋은 방법은 이와 같이 시작 위치 요소에 추가하는 것입니다.

.button {
    transition: background-color 0.3s ease;
}

전환을 위한 좋은 템플릿은 다음과 같습니다. 스타일은 height , background-color , color , margin , padding , 또는 이 전환을 모든 것에 적용하려면 all 로 설정하십시오. 전환 유형의 예는 ease , ease-in-out , ease-in 입니다.

.element {
    transition: [style] [duration in seconds]s [transition type];
}

전환을 사용하면 동일한 요소에 둘 이상의 다른 전환을 추가할 수도 있습니다. 예를 들어 버튼 배경이 0.3초가 걸리고 테두리 색상이 전환에 0.4초가 걸리기를 원할 경우.

이 데모 버튼의 전체 CSS는 다음과 같습니다.

.button {
    background-color: transparent;
    border: 1px solid black;
    border-radius: 5px;
    margin: 1rem;
    padding: 1rem;
    transition: background-color 0.3s ease, border-color 0.3s ease-in;
}

.button:hover. .button:focus {
    cursor: pointer;
    background-color: red;
    border-color: red;
}

SCSS를 사용하는 경우 코드는 다음과 같습니다.

.button {
    background-color: transparent;
    border: 1px solid black;
    border-radius: 5px;
    margin: 1rem;
    padding: 1rem;
    transition: background-color 0.3s ease, border-color 0.3s ease-in;

    &:hover,
    &:focus {
        cursor: pointer;
        background-color: red;
        border-color: red;
    }
}

이 코드가 실제로 작동하는지 확인하려면 위의 코드에 대한 Codepen이 있습니다.

Brett의 펜을 보다CSS animations example
( @brettanda ) CodePen .

CSS 키프레임 사용 방법

CSS 키프레임은 간단한 전환으로 수행할 수 없는 보다 복잡한 애니메이션에 사용할 수 있습니다. CSS 키프레임을 사용하면 애니메이션 전반에 걸쳐 서로 다른 시간에 요소가 변경되는 것에 대해 많은 것을 가질 수 있습니다.

바로 @keyframes 로 들어가 보겠습니다. 키프레임의 진행을 설정하는 두 가지 방법이 있습니다. 하나는 애니메이션이 시작되고 끝이 to에서 끝나는 from과 to입니다. 다른 방법은 백분율을 사용하는 것입니다. 여기서 0%는 시작 스타일이고 100%는 끝 스타일입니다. 다음은 이 두 가지 방법의 예입니다.

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateX(1rem);
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(0);
    }
}

CSS 애니메이션을 사용하면 @keyframes가 작동하기 전에 애니메이션을 가져오는 요소에 대해 몇 가지 사항을 지정해야 합니다. 키프레임 설정을 위한 최소값은 키프레임 이름과 지속 시간을 추가하는 것입니다. 애니메이션의 반복 횟수와 방향을 선택할 수도 있습니다. 위에서 fade-in 키프레임을 사용하여 키프레임을 설정한 예입니다.

p {
    animation-name: fade-in;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Brett의 펜을 보다CSS Keyframes example
( @brettanda ) CodePen .