애니메이션 속성을 사용하여 루프 간 지연 실행을 구현하는 방법에 대한 튜토리얼-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

애니메이션 속성을 사용하여 루프 간 지연 실행을 구현하는 방법에 대한 튜토리얼

零下一度

May 18, 2017 pm 02:37 PM

먼저 애니메이션의 정의와 사용법을 소개하겠습니다

animation속성은 축약된 속성으로 6가지 애니메이션 속성을 설정하는데 사용됩니다:

    animation-name
    animation-duration
    animation-timing-function
    animation-delay
    animation-iteration-count
    animation-direction

로그인 후 복사

기본값: none 0easing 0 1 Normal

참고: 항상 animation-duration 속성을 지정하십시오. 그렇지 않으면 지속 시간이 0이 되고 애니메이션이 재생되지 않습니다.

구문

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

로그인 후 복사

animation-name은 선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다. .

animation-duration 애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.

애니메이션 타이밍 기능은 애니메이션의 속도 곡선을 지정합니다.

animation-delay 애니메이션이 시작되기 전의 지연 시간을 지정합니다.

animation-iteration-count 애니메이션을 재생해야 하는 횟수를 지정합니다. (값: n회, 무한 루프)

animation-direction 애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.

요약:

위 속성을 바탕으로 특정 상황에 맞게 animation-delay와 animation-iteration-count만 설정하면 됩니다.

예:

p
{
animation:mymove 5s 5s infinite;
-webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */
}

로그인 후 복사

해결 예:

<!doctype html><html lang="en"><head>
 <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .item1{
         list-style: none;
         -webkit-animation: revolving 4s 0s infinite;
         animation: revolving 4s 0s infinite;
        }
        @-webkit-keyframes revolving{
         0,75%{
        -webkit-transform: perspective(700px) rotateX(90deg);
         }
         87.5%{
        -webkit-transform: perspective(700px) rotateX(0deg);
         }
         100%{
        -webkit-transform: perspective(700px) rotateX(-90deg);
         }
        }
    </style>
</head>
    <body>
        <ul>
            <li class="item1">梅西与美洲杯失之交臂</li>
        </ul>
    </body>
</html>

로그인 후 복사

전체 애니메이션을 4초로 설정한 다음 처음 75%인 3초가 남습니다. 변경되지 않고(0~75%), 다음 25%는 애니메이션의 1초에 불과합니다.

CSS3 애니메이션을 마스터해야 합니다( 애니메이션)의 8가지 주요 속성

3. css3 애니메이션 종료 이벤트 모니터링 예시 공유(애니메이션)

4. CSS3 방식의 두 가지 일시정지 방법(전환, 애니메이션) 설명

위 내용은 애니메이션 속성을 사용하여 루프 간 지연 실행을 구현하는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.