집 > 기사 > 웹 프론트엔드 > CSS3 애니메이션 특수 효과의 애니메이션 시퀀스에 대한 자세한 논의

CSS3 애니메이션 특수 효과의 애니메이션 시퀀스에 대한 자세한 논의

小云云원래의: 2017-12-25 09:05:151610검색

애니메이션이 CSS의 속성이라는 것은 누구나 다 아는 사실입니다. 이번 글에서는 CSS3 애니메이션 특수효과의 애니메이션 시퀀스(애니메이션) 관련 정보를 주로 소개하고 있어서 편집자가 꽤 좋다고 생각해서 지금부터 공유해 보도록 하겠습니다. 참조. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

먼저 애니메이션 애니메이션에 추가된 다양한 매개변수를 검토합니다.

(1) 무한 매개변수는 애니메이션이 무한 반복된다는 의미입니다. 애니메이션 지연 시간을 설정하기 위해 속도 곡선과 재생 횟수 사이에 시간 매개변수를 삽입할 수도 있습니다. 1초 후에 아이콘이 회전을 시작하여 두 번 회전하도록 하려면 코드는 다음과 같습니다.

.close:hover::before{
    -webkit-animation: spin 1s linear 1s 2;
    animation: spin 1s linear 1s 2;
}

(2) 대체 매개변수. 애니메이션 애니메이션에 역방향 재생 매개변수 대체를 추가합니다. 이 매개변수를 추가하면 애니메이션이 짝수 번 역방향으로 재생됩니다.

.close:hover::before{
    -webkit-animation: spin 1s linear 1s 2 alternate;
    animation: spin 1s linear 1s 2 alternate;
}

애니메이션 속성 매개변수 중에서 지연 매개변수는 가장 일반적으로 사용되는 매개변수 중 하나입니다. 애니메이션 개체가 여러 개인 경우 지연 매개변수를 사용하여 애니메이션 시퀀스를 형성하는 경우가 많습니다. 예를 들어, 다음 코드는 5개의 서로 다른 아이콘을 정의합니다.

<span class="close icon-suningliujinyun">Close</span>
<span class="close icon-shousuo">Close</span>
<span class="close icon-zhankai">Close</span>
<span class="close icon-diaoyonglian">Close</span>
<span class="close icon-lingshouyun">Close</span>

아이콘의 기본 스타일은 이전 닫기 아이콘과 동일합니다. 차이점은 여기의 아이콘이 인라인 블록으로 설정되어 있다는 것입니다. 가로로 배열. 코드는 다음과 같습니다.

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
}
.close::before{
    font-family: &#39;suningcloud&#39;;
    speak:none; /*使文本内容不能通过屏幕阅读器等辅助设备读取*/
    font-size:48px;
    display:block;
}

는 아래 그림과 같이 초기화 중에 표시됩니다.

다음으로 아이콘에 애니메이션 애니메이션을 추가하여 아이콘의 초기 위치를 -100% 아래로 오프셋합니다. , 그리고 다시 초기 위치로 이동합니다. 이 과정에서 아이콘은 동시에 완전 투명에서 완전 불투명으로 변경됩니다

.close{
	font-size:0px;/*使span中的文字不显示*/
	cursor:pointer;/*使鼠标指针显示为手型*/
	display:inline-block;
	width:100px;
	height:100px;
	line-height:100px;
	border-radius:50%;/*使背景形状显示为圆形*/
	background:#FFF;
	color:#8b8ab3;
	text-align:center;
	/**/
	-webkit-animation: moving 1s linear;
	animation: moving 1s linear;
}

@-webkit-keyframes moving {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@keyframes moving {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

위 5개 아이콘의 애니메이션 효과는 모두 동시에 수행됩니다. 아이콘 이동을 순차적으로 만들기 위해 각 아이콘에 대한 시퀀스를 생성합니다. 이전 방법과 다르게 animation-delay 속성을 통해 직접 애니메이션 지연을 설정할 수 있습니다. 코드는 다음과 같습니다.

.icon-suningliujinyun{
	-webkit-animation-delay:0s;
	animation-delay: 0s;
}
.icon-shousuo{
	-webkit-animation-delay:.1s;
	animation-delay: .1s;
}
.icon-zhankai{
	-webkit-animation-delay:.2s;
	animation-delay: .2s;
}
.icon-diaoyonglian{
	-webkit-animation-delay:.3s;
	animation-delay: .3s;
}
.icon-lingshouyun{
	-webkit-animation-delay:.4s;
	animation-delay: .4s;
}

위 코드에서는 5개 아이콘의 지연 시간을 각각 0과 0.1로 설정했습니다. , 0.2, 0.3 및 0.4초. 실제로 지연 시간은 0초가 기본값이므로 첫 번째 아이콘에는 실제로 지연 코드를 설정할 필요가 없습니다. 테스트 페이지에서 애니메이션 효과는 그림과 같습니다.

새로 고침을 두 번 했는데 맨 처음에 여러 아이콘이 상단에서 깜박이는 것을 발견했습니다. 이는 버그로 간주됩니다

이 버그가 발생하는 이유는 첫 번째 아이콘을 제외한 나머지 아이콘에서 애니메이션이 시작되지 않을 때 아이콘이 이동하지 않고 완전히 불투명해지기 때문입니다. 애니메이션이 시작되는 순간 아이콘은 완전히 투명하고 오프셋된 애니메이션 시작 상태로 전환됩니다.

해결책: 애니메이션 애니메이션의 animation-fill-mode 속성을 사용해야 합니다. 이 속성은 애니메이션 시간 이외의 요소 상태를 지정합니다. 값이 앞쪽이면 애니메이션이 완료된 후에도 마지막 키 프레임의 속성 값이 유지된다는 의미이며, 값이 뒤쪽이면 정반대이므로 첫 번째 키 프레임의 속성 값이 적용된다는 의미입니다. 애니메이션이 지연되기 전 요소에 적용되며, 값이 둘 다인 경우 앞으로 및 뒤로 설정이 모두 포함된다는 의미입니다. 이 예에서는 뒤로 또는 둘 다를 사용할 수 있습니다. 효과는 아래와 같습니다.

이 예에서는 아이콘의 움직임이 약간 탄력적인 효과를 갖기를 바랍니다. 즉, 아이콘이 위쪽으로 움직일 때, 끝점에서 속도를 늦추지 않고 계속해서 위쪽으로 이동한 후, 일정 거리를 초과하면 반대 방향으로 다시 끝점으로 이동하여 원을 이루는 왕복 효과입니다.

물론 프레임 애니메이션을 사용하여 이러한 효과를 얻을 수 있지만 속도 곡선을 사용하는 것이 더 쉬울 것입니다. 사용자 정의 곡선을 사용하려면 CSS3 애니메이션이 Cubic Bezier 수학 함수를 사용하여 속도 곡선을 생성하고 이 함수의 매개변수가 직관적이지 않기 때문에 몇 가지 도구가 필요한 경우가 많습니다. Cubase-bezier.com과 같은 사이트를 사용하여 속도 곡선을 시각적으로 조정할 수 있습니다.

다음으로 애니메이션 속성의 매개변수에 속도 곡선을 작성할 수 있습니다. 코드는 다음과 같습니다.

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
    /**/
    -webkit-animation: moving 1s linear;
    animation: moving 1s linear;
    /*清除抖动*/
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
}

효과는 다음과 같습니다.

CSS3 애니메이션 특수 효과의 애니메이션 시퀀스에 대한 자세한 논의

관련 기사