CSS 3 애니메이션 자세히 보기

CS3는 다음과 같은 매우 많은 변환 함수를 제공합니다.

2D: translate, rotate, scale, skew.

3D: translate3d, rotate3d, scale3d, skew3d.

이 함수들을transform 속성의 값으로 삼기만 하면 상응하는 효과를 설정할 수 있다.
CSS 3 애니메이션은 이러한 효과와 기타 CSS 속성을 당신이 설정한 방식에 따라 서로 바꿉니다.
1. 애니메이션 관련 속성
속성|설명------------------------------------------------------------------------------------------------@keyframes|애니메이션의 각 단계의 상태를 정의하는 코드 세그먼트animation|모든 애니메이션 속성의 약자 속성, animation-play-state와animation-fill-mode속성을 제외.animation-name|규정@keyframes애니메이션의 이름.animation-duration | 애니메이션이 한 주기를 완성하는 데 걸리는 초 또는 밀리초를 지정합니다.기본값은 0입니다.animation-timing-function | 애니메이션의 속도 곡선을 지정합니다.기본값은 ease입니다.animation-delay | 애니메이션을 시작할 시기를 지정합니다.기본값은 0입니다.animation-iteration-count|애니메이션이 재생되는 횟수를 지정합니다.기본값은 1입니다.animation-direction|애니메이션이 다음 주기에 역방향으로 재생되는지 여부를 지정합니다.기본값은 normal입니다.animation-play-state | 애니메이션이 실행 중이거나 일시 중지되었는지 여부를 지정합니다.기본값은 running입니다.animation-fill-mode | 애니메이션이 시작되기 전과 완료된 후의 요소를 기본값none으로 지정합니다.
@keyframes
애니메이션의 각 단계의 상태를 정의하는 코드 세그먼트입니다.예를 들어 시작 상태, 끝 상태, 중간 상태(백분율 표시 사용).

@keyframes exampleName {
    from {
        transform: rotateY(0deg);
        background: #000000;
    }
    50% {
        transform: rotateY(180deg);
        background: #00fa7e;
    }
    to {
        transform: rotateY(0deg);
        background: #008dff;
    }
}

animation-name @keyframes로 정의된 상태 집합 이름, 예를 들어 위exampleName를 사용합니다.
animation-duration
애니메이션의 주기 시간입니다.단위는 초(s)일 수도 있고 밀리초(ms)일 수도 있다.
animation-timing-function
애니메이션 속도 변경 함수에는 다음과 같은 옵션이 있습니다.

linear: 속도가 변하지 않습니다.cubic-bezier(0,0,1,1)

ease-in: 저속 시작~정상 속도.cubic-bezier(0.42,0,1,1)

ease-out: 정상 속도 ~ 저속 종료.cubic-bezier(0,0,0.58,1)

ease-in-out: 저속 시작~정상 속도~저속 끝.cubic-bezier(0.42,0,0.58,1)

ease: ease-in-out와 기본적으로 같지만 시작은 끝보다 조금 빠르다.cubic-bezier(0.25,0.1,0.25,1)

cubic-bezier(x1, y1, x2, y2): 베셀 함수를 속도 함수로 세 번 사용한다.

cubic-bezier 곡선 테스트 디버깅 사이트: cubic-bezier
animation-delay
애니메이션이 시작되기 전에 기다리는 시간입니다.단위는 초(s)일 수도 있고 밀리초(ms)일 수도 있다.
animation-iteration-count
애니메이션의 주기 횟수입니다.구체적인 횟수일 수도 있고 infinite일 수도 있어 무한 순환 재생을 의미한다.
animation-direction
애니메이션 주기의 방향:

normal: 정방향 재생.

reverse: 역방향 재생.

alternate: 정방향 재생과 반방향 재생이 번갈아 진행된다.

animation
이 속성은 다음 형식으로 표시됩니다.

animate: name duration timing-function delay iteration-count direction;

animation-play-state
애니메이션의 상태를 제어합니다. 재생running과 일시정지paused 두 가지 상태가 있습니다.
animation-fill-mode
애니메이션 시작 전과 완료 후의 요소를 지정합니다.

none: 요소가 애니메이션 전후의 상태는 애니메이션과 관련이 없다.

forwards: 애니메이션이 완성되면 요소는 애니메이션의 마지막 상태를 유지합니다.

backwards: 애니메이션이 시작되기 전에 요소는 애니메이션이 시작된 상태를 유지합니다.

both: forwards와 backwards의 결합.

2. transition
CSS3은 animation와 관련된 속성 이외에 다음과 같은 형식의 transition 속성을 제공합니다.

transition: propertyName duration [timing-function] [delay], ...;

보시다시피 transition는@keyframes만from과to 두 가지 상태이고 재생 횟수가 1이고 멈출 수 없는animation입니다.
예를 들어 마우스를 div에 놓을 때 90도 회전하고 배경은 검은색에서 회색, 글씨체는 흰색에서 검은색으로 바뀐다.

#division2 {
    width: 300px;
    height: 100px;
    margin-top: 50px;
    font-size: 2em;
    text-align: center;
    line-height: 100px;
    color: #FFF;
    background: #000;
    transition: transform 2s linear 0s, background 2s linear 0s, color 2s linear 0s;
}

#division2:hover {
    background: #cccdd1;
    color: #000;
    transform: rotate(90deg);
}

3. Demo
[중요 힌트] 추천과 소장을 잊지 마세요(𗙚□′)𗙚(┴-┴

git clone https://github.com/JasonKid/fezone.git

검색 애니메이션 세부 정보