그림 CSS3 노트 4 애니메이션

1105 단어 animation
animation은 8개의 속성을 포함하여 키프레임 키프레임을 호출하여 애니메이션을 만듭니다.
1. animation-name 키프레임 이름
2.animation-duration 시간
3.animation-timing-function 애니메이션 함수
4. animation-delay
5. animation-interation-count 주파수number | "infinite"
6. animation-direction 방향 normal | altername (짝수: 순서 재생, 홀수: 거꾸로 재생)
7.animation-paly-state 재생 상태running|pause
8. animation-fill-mode 설정 시간 외 속성 none(끝날 때 초기로 반전) | forward(끝날 때 마지막 프레임 보존) | backword | both
 
키프레임 정의:
@keyframes framesName {

    from | 0% {

        ...

    }

    10%, 20%, 30% {

        ...

    }

    to | 100% {

        ...

    }

}



/* Demo */

animation: framesName 1s liear

좋은 웹페이지 즐겨찾기