css3 애니메이션의 시작 시간과 지속 시간을 어떻게 편리하게 제어합니까
2011 단어 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/ 원본 코드를 보면 더욱 깊이 이해하고 인식할 수 있습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
초보자를 위한 간단한 카드 호버 애니메이션html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.