css3 애니메이션의 시작 시간과 지속 시간을 어떻게 편리하게 제어합니까

2011 단어 css3
일반적으로 우리는 css3 애니메이션을 제어할 때 코드량을 줄이기 위해 간략하게 쓸 수 있다. 애니메이션이 필요한 요소에 클래스 이름을 추가하면 된다. 다음과 같은 예이다.
/*             */
.fadeInUp{
    -webkit-animation:fadeInUp 1000ms .8s ease both;
}
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		transform: translateY(20px)
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}
 
                  。                    css3   ，                                     。                              ，         ，                      。     ：
.fadeInUp01{
    -webkit-animation:fadeInUp 1200ms .1s ease both;
}

.fadeInUp03{
    -webkit-animation:fadeInUp 1400ms 1.2s ease both;
}
.fadeInUp04{
    -webkit-animation:fadeInUp 1600ms 1.4s ease both;
}
.
.
.

이렇게 계속 복제해...
 
만약 우리가 애니메이션의 시작 시간과 지속 시간을 단독으로 추출하여 단독 컨트롤을 할 수 있다면 좋을까요?
그래서 우리는 js를 생각했다
//      CusAnimateDom              
        $(".CusAnimateDom").each(function () {
            var _delay = $(this).attr("data-delay");
            var _duration = $(this).attr("data-duration");
            $(this).css("-webkit-animation-delay", (_delay) + "ms");
            $(this).css("-webkit-animation-duration", (_duration) + "ms");
        });

  
<img src="images/load.png" class="corner CusAnimateDom ScalingAnimate" data-delay="600" data-duration="1500" lazypath="images/card/corner.png" />

 
 
참조http://gift.guzhongyi.com/ 원본 코드를 보면 더욱 깊이 이해하고 인식할 수 있습니다.
대기 열 배열
Wannafly 챌 린 지 29 A

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage