집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3 애니메이션 시퀀스 애니메이션

CSS3 애니메이션 시퀀스 애니메이션

php中世界最好的语言원래의: 2018-03-20 16:20:474028검색

이번에는 CSS3 애니메이션 시퀀스 애니메이션을 가져왔습니다. 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: 'suningcloud';
    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 속성을 사용해야 합니다. 이 속성은 애니메이션 시간 이외의 요소 상태를 지정합니다. 값이 앞쪽이면 애니메이션이 완료된 후에도 마지막 키 프레임의 속성 값이 유지된다는 의미이며, 값이 뒤쪽이면 정반대이므로 첫 번째 키 프레임의 속성 값이 적용된다는 의미입니다. 애니메이션이 지연되기 전 요소에 적용되며, 값이 둘 다인 경우 앞으로 및 뒤로 설정이 모두 포함된다는 의미입니다. 이 예에서는 뒤로 또는 둘 다를 사용할 수 있습니다.

.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; 
}

의 효과는 아래와 같습니다.

PS: 애니메이션에서는 전환 애니메이션처럼 속도 곡선을 설정할 수도 있습니다.

예를 들어 이 예에서는 : 아이콘의 움직임이 약간의 탄력적인 효과, 즉 아이콘이 위쪽으로 움직일 때 속도가 느려지지 않고 끝점에서 멈추는 것이 아니라, 끝점에 도달한 후에도 계속 위쪽으로 움직인 후 움직이기를 바랍니다. 일정 거리를 초과한 후 반대 방향으로 다시 끝점으로 돌아가는 왕복 운동 효과를 형성합니다.

물론 프레임 애니메이션을 사용하여 이러한 효과를 얻을 수 있지만 속도 곡선을 사용하는 것이 더 쉬울 것입니다. 사용자 정의 곡선을 사용하려면 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;*/
    /*cubic-bezier*/
    -webkit-animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);
      animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);
    /*清除抖动*/
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
}

효과는 아래와 같습니다.

사례를 읽으신 후 방법을 마스터하셨으리라 믿습니다. 이 기사에서는 더 많은 PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!