CSS 애니메이션 구현에 대한 자세한 설명과 예시

高洛峰

풀어 주다： 2017-03-28 17:40:13

원래의

2438명이 탐색했습니다.

CSS3의

css3 애니메이션

애니메이션 효과를 얻기 위해 애니메이션을 제어하는 데 사용되는 애니메이션을 통해 복잡한 애니메이션 시퀀스를 만들 수 있습니다. 애니메이션은 주로 두 부분으로 구성됩니다.

이와 유사한 키프레임을 통해 애니메이션을 선언합니다. 플래시 애니메이션에서

더 복잡한 애니메이션 효과를 얻으려면 animation 속성에서 keyframes로 선언된 애니메이션을 호출하세요.
CSS3에서는
키프레임을 키프레임이라고 합니다.
키프레임의 구문 규칙은 다음과 같습니다.

@keyframes yxz {
 0% {
    margin-left: 100px;
    background: green;
 }
 40% {
    margin-left: 150px;
    background: orange;
 }
 60% {
    margin-left: 75px;
    background: blue;
 }
 100% {
    margin-left: 100px;
    background: red;
 }
}

로그인 후 복사

여기서 "yxz"라는 애니메이션을 정의합니다. ". 해당 애니메이션은 0%에서 시작하여 100%에서 끝나며 40%와 60% 두 가지 프로세스를 거치게 됩니다. 위 코드의 구체적인 의미는 "yxz" 애니메이션이 0%일 때 요소는 는 왼쪽 위치 100px에 위치하며 배경색은 녹색이고 40%에서는 요소가 왼쪽 위치 150px로 전환되고 배경색은 주황색입니다. 왼쪽은 75px이고 배경색은 파란색입니다. 마지막으로 애니메이션이 100%로 끝나면 요소는 왼쪽이 100px인 시작점으로 돌아가고 배경색은 빨간색이 됩니다. 실행 시간이 10초이면 각 실행 세그먼트의

상태

는 다음과 같습니다. @
@@@

키프레임의 키 프레임 실제로 애니메이션의 키프레임 순서는 선언된 순서가 아닌 0%, 40%에 따라 결정되므로 키프레임은 순서에 관계없이 지정될 수 있습니다. 20%, 60%, 80%에는 동일한 스타일이 적용되고, 100%에는 다른 스타일이 적용됩니다. 이 두 애니메이션은 적용되지 않기 때문에 어떤 요소에도 적용되지 않습니다.

keyframes 애니메이션을 선언한 후 애니메이션이 적용되도록 하려면 CSS 속성을 통해 keyframes에서 선언한 애니메이션을 호출해야 합니다.

키프레임 호출

CSS 애니메이션 구현에 대한 자세한 설명과 예시 애니메이션 속성 animation을 사용하여

키프레임에 의해 선언된 애니메이션을 호출합니다. 애니메이션 속성인 animation은 8개의 하위 속성을 포함하는 복합 속성입니다. 구문은 다음과 같습니다.

@keyframes yxz{
    0%,40%{
        width:200px;
        height:200px;
    }
    20%,60%,80%{
        width:100px;
        height:100px;
    }
    100%{
        width:0;
        height:0;
    }
}

로그인 후 복사

@

@animation-name@: 주로 키프레임 애니메이션의 이름을 지정하는 데 사용됩니다. 이 이름은 keyframes 이름은 같습니다. CSS가 애니메이션을 로드할 때 해당 이름을 사용하여 실행합니다.

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-play-state> || <animation-fill-mode>] *</animation-fill-mode></animation-play-state></animation-direction></animation-iteration-count></animation-delay></animation-timing-function></animation-duration></animation-name>

로그인 후 복사

　IDENT:

키프레임으로 생성된 애니메이션의 이름입니다.

없음: 기본값입니다. 값이 없음이면 애니메이션 효과가 없으며 애니메이션을 재정의하는 데 사용할 수 있습니다. @

animation-duration CSS 애니메이션 구현에 대한 자세한 설명과 예시 : 주로 애니메이션 재생에 필요한 시간을 설정하는 데 사용되며 단위는 s(초) 또는 ms(밀리초)이며 기본값은 0입니다.

animation-name:none | IDENT [,none | IDENT] *

로그인 후 복사

　animation-timing-function: 주로 애니메이션 재생 속도를 설정하는 데 사용됩니다. @

전환 타이밍 기능과 유사하게 클릭하여 볼 수 있습니다.

@　
animation-delay

: 주로 애니메이션 지연 시간을 설정하는 데 사용됩니다.

animation-duration:<time> [,<time>] *</time></time>

로그인 후 복사

시간이 양의 정수 이면 지연 시간입니다. 음의 정수이면 재생 시간이 잘립니다(animation-duration에서 사용되는 시간의 일부가 잘립니다). 즉, 이 부분의 값을 건너뛰고 후속 애니메이션을 직접 수행)　

　animation-iteration-count

: 주로 애니메이션이 재생되는 횟수를 설정하는 데 사용됩니다.

animation-duration:<time> [,<time>] *</time></time>

로그인 후 복사

일반적으로 정수, 부동 소수점 숫자도 사용할 수 있습니다. 기본값은 1입니다. 값이 무한대이면 애니메이션이 무한히 재생됩니다.

　animation-direction

: 주로 애니메이션 재생 방향을 설정하는 데 사용됩니다.

animation-iteration-count: infinite | <number> [,infinite | <number>] *</number></number>

로그인 후 복사

기본값은 일반이며 루프할 때마다 애니메이션이 앞으로 재생됩니다. 교대로 애니메이션이 앞으로 한 번, 뒤로 한 번 재생됩니다.

　animation-play-state

: 주로 애니메이션 재생 상태를 제어하는 데 사용됩니다.

animation-direction:normal | alternate [,normal | alternate] *

로그인 후 복사

실행이 기본값으로, 일시정지하여 재생을 중지할 수 있습니다.

　　animation-fill-mode：主要用来设置动画时间之外的属性，也就是动画开始前或者结束后的属性。

animation-fill-mode:none | forwards | backwards | both

로그인 후 복사

　　默认值为none，表示动画按期执行与结束，在动画结束时，会反回初始状态。forwards，当动画结束时，停留在最后最后一帧(保持最后的状态)。backwards，当动画开始时迅速应用第一帧。both，同时拥有forwards与backwards的作用。

学以致用，学习完动画的基础知识后，就需要练习一下，把学的东西用出来。可以把代码复制在浏览器中观看效果。

nbsp;html>



<meta>
<title></title>
<style>
    /*元素从左边出现*/
    @keyframes bga {
        0% {
            left: -500px;
        }

        100% {
            left: 0;
        }
    }
    /*元素从下边出来*/
    @keyframes bgb {
        0% {
            top: 350px;
        }

        100% {
            top: 0;
        }
    }
    /*元素从小到大*/
    @keyframes bgc {
        0% {
            transform: scale(0.1);
        }

        100% {
            transform: none;
        }
    }
    /*元素从大到小*/
    @keyframes bgd {
        0% {
            transform: scale(2);
        }

        100% {
            transform: none;
        }
    }
    /*元素旋转并放大*/
    @keyframes bge {
        0% {
            transform: rotate(-360deg) scale(0.1);
        }

        100% {
            transform: none;
        }
    }
    /*选中元素时，隐藏其他元素*/
    @keyframes no {
        0% {
            z-index: 23;
        }

        100% {
            z-index: 23;
        }
    }
    /*兼容webkit浏览器*/
    @-webkit-keyframes bga {
        0% {
            left: -500px;
        }

        100% {
            left: 0;
        }
    }

    @-webkit-keyframes bgb {
        0% {
            top: 350px;
        }

        100% {
            top: 0;
        }
    }

    @-webkit-keyframes bgc {
        0% {
            transform: scale(0.1);
        }

        100% {
            transform: none;
        }
    }

    @-webkit-keyframes bgd {
        0% {
            transform: scale(2);
        }

        100% {
            transform: none;
        }
    }

    @-webkit-keyframes bge {
        0% {
            transform: rotate(-360deg) scale(0.1);
        }

        100% {
            transform: none;
        }
    }

    @-webkit-keyframes no {
        0% {
            z-index: 23;
        }

        100% {
            z-index: 23;
        }
    }

    * {
        margin: 0;
        padding: 0;
    }

    html, body {
        height: 100%;
    }

    img.bg {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
    }

    .demo p {
        position: absolute;
        z-index: 9999;
    }

    a {
        display: block;
        width: 100px;
        height: 100px;
        background: rgba(255, 0, 0,.2);
        margin-bottom: 15px;
        text-decoration: none;
        color: #ffffff;
    }

    #bga:target {
        z-index: 100;
        -webkit-animation:bga 2s ease;
        animation:bga 2s ease;
    }

    #bgb:target {
        z-index: 100;
        -webkit-animation:bgb 2s ease;
        animation:bgb 2s ease;
    }

    #bgc:target {
        z-index: 100;
        -webkit-animation:bgc 2s ease;
        animation:bgc 2s ease;
    }

    #bgd:target {
        z-index: 100;
        -webkit-animation:bgd 2s ease;
        animation:bgd 2s ease;
    }

    #bge:target {
        z-index: 100;
        -webkit-animation:bge 2s ease;
        animation:bge 2s ease;
    }
</style>


<p>
    </p><p>
        </p>

로그인 후 복사