在Safari动画延迟中,我在Safari中遇到了令人沮丧的错误。
这个动画在Chrome,Firefox,IE11,IE10的桌面上运行得非常漂亮,但我在Safari中获得了不同的结果。在等量的暂停后(由动画延迟控制),行李片应全部显示。
桌面Safari有时会正确显示,而其他时间会减慢行李过渡的第一部分并加快结束速度,否则它会聚集在一起。在iPhone 6上的移动Safari和移动Chrome中,有时它会一起忽略动画延迟并立即转换整个行李。当性能不一致时,我很难排除故障。我添加了一些JavaScript,以确保在开始动画之前所有资源都已加载到页面上,但这似乎没有帮助。任何人都知道这里发生了什么?
http://codepen.io/brendamarienyc/pen/qdoOZM
@-webkit-keyframes bag-1 {
0%,
19.9% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
@keyframes bag-1 {
0%,
19.9% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
.satchel-1 {
-webkit-animation-name: bag-1;
animation-name: bag-1;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-1 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-2 {
0%,
39.9% {
opacity: 0;
}
40%,
100% {
opacity: 1;
}
}
@keyframes bag-2 {
0%,
39.9% {
opacity: 0;
}
40%,
100% {
opacity: 1;
}
}
.satchel-2 {
-webkit-animation-name: bag-2;
animation-name: bag-2;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-2 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-3 {
0%,
59.9% {
opacity: 0;
}
60%,
100% {
opacity: 1;
}
}
@keyframes bag-3 {
0%,
59.9% {
opacity: 0;
}
60%,
100% {
opacity: 1;
}
}
.satchel-3 {
-webkit-animation-name: bag-3;
animation-name: bag-3;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-3 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-4 {
0%,
79.9% {
opacity: 0;
}
80%,
100% {
opacity: 1;
}
}
@keyframes bag-4 {
0%,
79.9% {
opacity: 0;
}
80%,
100% {
opacity: 1;
}
}
.satchel-4 {
-webkit-animation-name: bag-4;
animation-name: bag-4;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-4 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
@-webkit-keyframes bag-5 {
0%,
99.9% {
opacity: 0;
}
100%,
100% {
opacity: 1;
}
}
@keyframes bag-5 {
0%,
99.9% {
opacity: 0;
}
100%,
100% {
opacity: 1;
}
}
.satchel-5 {
-webkit-animation-name: bag-5;
animation-name: bag-5;
-webkit-animation-duration: 22500ms;
animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform: translateZ(0);
transform: translateZ(0);
opacity: 0;
}
.preload .satchel-5 {
-webkit-animation-name: none !important;
animation-name: none !important;
}
.satchel-container {
height: 450px;
width: 472px;
margin: 2em auto;
position: relative;
}
@media (max-width: 500px) {
.satchel-container {
height: 300px;
width: 315px;
}
}
.satchel-shadow {
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 94px;
width: 472px;
}
@media (max-width: 500px) {
.satchel-shadow {
height: 63px;
width: 315px;
}
}
.satchel-body {
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 295px;
width: 472px;
-webkit-animation-delay: 0;
animation-delay: 0;
}
@media (max-width: 500px) {
.satchel-body {
height: 197px;
width: 315px;
}
}
.satchel-gusset {
position: absolute;
bottom: 30px;
left: 14px;
height: 221px;
width: 441px;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
}
@media (max-width: 500px) {
.satchel-gusset {
position: absolute;
bottom: 20px;
left: 10px;
height: 149px;
width: 294px;
}
}
.satchel-piping {
position: absolute;
bottom: 22px;
left: 21px;
height: 268px;
width: 429px;
-webkit-animation-delay: 900ms;
animation-delay: 900ms;
}
@media (max-width: 500px) {
.satchel-piping {
position: absolute;
bottom: 15px;
left: 14px;
height: 179px;
width: 286px;
}
}
.satchel-collar {
position: absolute;
bottom: 15px;
left: 30px;
height: 63px;
width: 412px;
-webkit-animation-delay: 900ms;
animation-delay: 900ms;
}
@media (max-width: 500px) {
.satchel-collar {
position: absolute;
bottom: 7px;
left: 20px;
height: 42px;
width: 275px;
}
}
.satchel-strap {
position: absolute;
bottom: 70px;
left: 139px;
height: 370px;
width: 195px;
-webkit-animation-delay: 1350ms;
animation-delay: 1350ms;
}
@media (max-width: 500px) {
.satchel-strap {
position: absolute;
bottom: 47px;
left: 92px;
height: 247px;
width: 130px;
}
}
.satchel-narrow {
position: absolute;
bottom: 68px;
left: 13px;
height: 232px;
width: 377px;
-webkit-animation-delay: 1800ms;
animation-delay: 1800ms;
}
@media (max-width: 500px) {
.satchel-narrow {
position: absolute;
bottom: 46px;
left: 8px;
height: 155px;
width: 251px;
}
}
答案 0 :(得分:9)
即使在Chrome中显示效果很好,即使存在性能问题。试图获得性能统计数据是错误的,制作6个基本设计副本并禁用GPU会在我的机器上重现问题(Windows上的Chrome)。
嗯,这是我尝试优化您的设计性能。
首先,您正在使用不透明度,但没有过渡 - 从0快速移动到1.如果您想要的只是更改元素可见性,则可以使用可见性。它运行得更快。
其次,您使用的动画与5种不同的包不同。这使得第一个袋子可见 - 但在动画的最后部分隐藏在其他袋子下面。您可以为所有元素重复使用相同的动画,只需更改动画延迟即可。您将在我的演示中看到关键帧更简单,代价是动画延迟的复杂性增加。另请注意,我会尽快关闭可见性,以避免显示其他不可见元素的成本。
你处理叠加层的方式要求重复每个类的第一个元素,一次是静态的,另一个是在循环结束时显示的一些时刻。我已经改变了另一个模式,我正在改变元素的z-index。现在你不需要重复元素了。
最后,我将几个项目分组在一个包类,我也关闭了包容器的可见性。我相信这会以某种方式优化性能,但我不确定
我的演示:
@-webkit-keyframes satchel {
0% {
visibility: visible;
z-index: 100;
}
25% {
visibility: visible;
z-index: 1;
}
25%, 100% {
visibility: hidden;
}
}
@keyframes satchel {
0% {
visibility: visible;
z-index: 100;
}
25% {
visibility: visible;
z-index: 1;
}
25%, 100% {
visibility: hidden;
}
}
.satchel-1, .satchel-2, .satchel-3, .satchel-4, .satchel-5 {
-webkit-animation: satchel 22500ms infinite;
animation-name: satchel;
animation-duration: 22500ms;
animation-iteration-count: infinite;
}
/* body 0ms gusset 450ms collar=900ms piping=900ms strap=1350ms narrow=1800ms */
.satchel-1.satchel-body {
-webkit-animation-delay: calc(0ms - 22500ms);
animation-delay: calc(0ms - 22500ms);
}
.satchel-1.satchel-gusset {
-webkit-animation-delay: calc(450ms - 22500ms);
animation-delay: calc(450ms - 22500ms);
}
.satchel-1.satchel-collar {
-webkit-animation-delay: calc(900ms - 22500ms);
animation-delay: calc(900ms - 22500ms);
}
.satchel-1.satchel-piping {
-webkit-animation-delay: calc(900ms - 22500ms);
animation-delay: calc(900ms - 22500ms);
}
.satchel-1.satchel-strap {
-webkit-animation-delay: calc(1350ms - 22500ms);
animation-delay: calc(1350ms - 22500ms);
}
.satchel-1.satchel-narrow {
-webkit-animation-delay: calc(1800ms - 22500ms);
animation-delay: calc(1800ms - 22500ms);
}
/* satchel-2 4500ms */
.satchel-2.satchel-body {
-webkit-animation-delay: calc(0ms + 4500ms - 22500ms);
animation-delay: calc(0ms + 4500ms - 22500ms);
}
.satchel-2.satchel-gusset {
-webkit-animation-delay: calc(450ms + 4500ms - 22500ms);
animation-delay: calc(450ms + 4500ms - 22500ms);
}
.satchel-2.satchel-collar {
-webkit-animation-delay: calc(900ms + 4500ms - 22500ms);
animation-delay: calc(900ms + 4500ms - 22500ms);
}
.satchel-2.satchel-piping {
-webkit-animation-delay: calc(900ms + 4500ms - 22500ms);
animation-delay: calc(900ms + 4500ms - 22500ms);
}
.satchel-2.satchel-strap {
-webkit-animation-delay: calc(1350ms + 4500ms - 22500ms);
animation-delay: calc(1350ms + 4500ms - 22500ms);
}
.satchel-2.satchel-narrow {
-webkit-animation-delay: calc(1800ms + 4500ms - 22500ms);
animation-delay: calc(1800ms + 4500ms - 22500ms);
}
/* satchel-3 9000ms */
.satchel-3.satchel-body {
-webkit-animation-delay: calc(0ms + 9000ms - 22500ms);
animation-delay: calc(0ms + 9000ms - 22500ms);
}
.satchel-3.satchel-gusset {
-webkit-animation-delay: calc(450ms + 9000ms - 22500ms);
animation-delay: calc(450ms + 9000ms - 22500ms);
}
.satchel-3.satchel-collar {
-webkit-animation-delay: calc(900ms + 9000ms - 22500ms);
animation-delay: calc(900ms + 9000ms - 22500ms);
}
.satchel-3.satchel-piping {
-webkit-animation-delay: calc(900ms + 9000ms - 22500ms);
animation-delay: calc(900ms + 9000ms - 22500ms);
}
.satchel-3.satchel-strap {
-webkit-animation-delay: calc(1350ms + 9000ms - 22500ms);
animation-delay: calc(1350ms + 9000ms - 22500ms);
}
.satchel-3.satchel-narrow {
-webkit-animation-delay: calc(1800ms + 9000ms - 22500ms);
animation-delay: calc(1800ms + 9000ms - 22500ms);
}
/* satchel-4 13500ms */
.satchel-4.satchel-body {
-webkit-animation-delay: calc(0ms + 13500ms - 22500ms);
animation-delay: calc(0ms + 13500ms - 22500ms);
}
.satchel-4.satchel-gusset {
-webkit-animation-delay: calc(450ms + 13500ms - 22500ms);
animation-delay: calc(450ms + 13500ms - 22500ms);
}
.satchel-4.satchel-collar {
-webkit-animation-delay: calc(900ms + 13500ms - 22500ms);
animation-delay: calc(900ms + 13500ms - 22500ms);
}
.satchel-4.satchel-piping {
-webkit-animation-delay: calc(900ms + 13500ms - 22500ms);
animation-delay: calc(900ms + 13500ms - 22500ms);
}
.satchel-4.satchel-strap {
-webkit-animation-delay: calc(1350ms + 13500ms - 22500ms);
animation-delay: calc(1350ms + 13500ms - 22500ms);
}
.satchel-4.satchel-narrow {
-webkit-animation-delay: calc(1800ms + 13500ms - 22500ms);
animation-delay: calc(1800ms + 13500ms - 22500ms);
}
/* satchel-5 18000ms */
.satchel-5.satchel-body {
-webkit-animation-delay: calc(0ms + 18000ms - 22500ms);
animation-delay: calc(0ms + 18000ms - 22500ms);
}
.satchel-5.satchel-gusset {
-webkit-animation-delay: calc(450ms + 18000ms - 22500ms);
animation-delay: calc(450ms + 18000ms - 22500ms);
}
.satchel-5.satchel-collar {
-webkit-animation-delay: calc(900ms + 18000ms - 22500ms);
animation-delay: calc(900ms + 18000ms - 22500ms);
}
.satchel-5.satchel-piping {
-webkit-animation-delay: calc(900ms + 18000ms - 22500ms);
animation-delay: calc(900ms + 18000ms - 22500ms);
}
.satchel-5.satchel-strap {
-webkit-animation-delay: calc(1350ms + 18000ms - 22500ms);
animation-delay: calc(1350ms + 18000ms - 22500ms);
}
.satchel-5.satchel-narrow {
-webkit-animation-delay: calc(1800ms + 18000ms - 22500ms);
animation-delay: calc(1800ms + 18000ms - 22500ms);
}
@-webkit-keyframes bag {
0%, 35% {
visibility: visible;
}
35%, 100% {
visibility: hidden;
}
}
@keyframes bag {
0%, 35% {
visibility: visible;
}
35%, 100% {
visibility: hidden;
}
}
.bag {
-webkit-animation-name: bag;
-webkit-animation-duration: 22500ms;
-webkit-animation-iteration-count: infinite;
animation-name: bag;
animation-duration: 22500ms;
animation-iteration-count: infinite;
z-index: 1000;
position: absolute;
height: 100%;
width: 100%;
}
.bag:nth-child(2) {
-webkit-animation-delay: calc(4500ms - 22500ms);
animation-delay: calc(4500ms - 22500ms);
}
.bag:nth-child(3) {
-webkit-animation-delay: calc(9000ms - 22500ms);
animation-delay: calc(9000ms - 22500ms);
}
.bag:nth-child(4) {
-webkit-animation-delay: calc(13500ms - 22500ms);
animation-delay: calc(13500ms - 22500ms);
}
.bag:nth-child(5) {
-webkit-animation-delay: calc(18000ms - 22500ms);
animation-delay: calc(18000ms - 22500ms);
}
.satchel-container {
height: 450px;
width: 472px;
margin: 2em;
position: relative;
display: inline-block;
}
@media (max-width: 500px) {
.satchel-container {
height: 300px;
width: 315px;
}
}
.satchel-shadow {
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 94px;
width: 472px;
}
@media (max-width: 500px) {
.satchel-shadow {
height: 63px;
width: 315px;
}
}
.satchel-body {
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
height: 295px;
width: 472px;
}
@media (max-width: 500px) {
.satchel-body {
height: 197px;
width: 315px;
}
}
.satchel-gusset {
position: absolute;
bottom: 30px;
left: 14px;
height: 221px;
width: 441px;
}
@media (max-width: 500px) {
.satchel-gusset {
position: absolute;
bottom: 20px;
left: 10px;
height: 149px;
width: 294px;
}
}
.satchel-piping {
position: absolute;
bottom: 22px;
left: 21px;
height: 268px;
width: 429px;
}
@media (max-width: 500px) {
.satchel-piping {
position: absolute;
bottom: 15px;
left: 14px;
height: 179px;
width: 286px;
}
}
.satchel-collar {
position: absolute;
bottom: 15px;
left: 30px;
height: 63px;
width: 412px;
}
@media (max-width: 500px) {
.satchel-collar {
position: absolute;
bottom: 7px;
left: 20px;
height: 42px;
width: 275px;
}
}
.satchel-strap {
position: absolute;
bottom: 70px;
left: 139px;
height: 370px;
width: 195px;
}
@media (max-width: 500px) {
.satchel-strap {
position: absolute;
bottom: 47px;
left: 92px;
height: 247px;
width: 130px;
}
}
.satchel-narrow {
position: absolute;
bottom: 68px;
left: 13px;
height: 232px;
width: 377px;
animation-delay: calc(1800ms - 22500ms);
}
@media (max-width: 500px) {
.satchel-narrow {
position: absolute;
bottom: 46px;
left: 8px;
height: 155px;
width: 251px;
}
}
<section class="bag-animation">
<div class="satchel-container">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-shadow.png" class="satchel-shadow">
<!--Satchel Body-->
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-marble-python.png" class="satchel-1 satchel-body">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-celedon.png" class="satchel-2 satchel-body">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-blue-python.png" class="satchel-body satchel-3">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-bone.png" class="satchel-4 satchel-body">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-black-croc.png" class="satchel-5 satchel-body">
<!--bag marble-->
<div class="bag">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-marble-python.png" class="satchel-1 satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-marble-python.png" class="satchel-1 satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-marble-python.png" class="satchel-1 satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-blue-python.png" class="satchel-1 satchel-narrow">
</div>
<!--bag celedon-->
<div class="bag">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-celedon.png" class="satchel-2 satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-celedon.png" class="satchel-2 satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-celedon.png" class="satchel-2 satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-celedon.png" class="satchel-2 satchel-narrow">
</div>
<!--bag blue-->
<div class="bag">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-blue-python.png" class="satchel-3 satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-blue-python.png" class="satchel-3 satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-blue-python.png" class="satchel-3 satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-blue-python.png" class="satchel-3 satchel-narrow">
</div>
<!--bag bone-->
<div class="bag">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-bone.png" class="satchel-4 satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-bone.png" class="satchel-4 satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-bone.png" class="satchel-4 satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-bone.png" class="satchel-4 satchel-narrow">
</div>
<!--bag bone-->
<div class="bag">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-black-croc.png" class="satchel-5 satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-black-croc.png" class="satchel-5 satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-black-croc.png" class="satchel-5 satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-black-croc.png" class="satchel-5 satchel-narrow">
</div>
</div>
</section>
还有另一种可能性,它会更有效率,但灵活性较差:您可以在合成图像中对同一类图像进行分组,并将其作为精灵更改处理(修改背景图像位置)。然而,你需要对这个进行全面的重新设计。
答案 1 :(得分:6)
尝试使用简单的过渡代替关键帧动画怎么样?你只是在这里转换不透明度 - 也许通过使用自定义贝塞尔曲线你可以达到同样的效果。
您也可以尝试替换-webkit-transform:translateZ(0); with -webkit-transform:translate3d(0,0,0); - 我注意到过去两者之间存在轻微的时序问题(你使用这种技术只是为了强迫他们自己的硬件层上的元素吗?)
答案 2 :(得分:4)
从我看到你实际上并没有正确地给予元素延迟,动画延迟分配必须是这样的。
.satchel-strap.satchel-#{$i}{
animation-delay: $bag-piece-timing * 1.5 * $i
}
.satchel-body.satchel-#{$i}{
animation-delay: $bag-piece-timing * $i;
}
.satchel-gusset.satchel-#{$i}{
animation-delay: $bag-piece-timing * 0.5 * $i
}
.satchel-piping.satchel-#{$i}{
animation-delay: $bag-piece-timing;
}
.stachel-collar.satchel-#{$i}{
animation-delay: $bag-piece-timing;
}
答案 3 :(得分:0)
我使用CSS
播放了一些内容以及我查找了移动webkit
特定问题,但我找不到任何有用的内容。
所以基本上我重构了这个问题,并使用CSS transitions
来表示淡入/淡出效果,使用jQuery来管理这些动画的速度。
我在iOS和Safari以及其他浏览器上测试过,它对我来说效果很好。
HTML (按行李模型重新分组图片)
<div id="bag1" class="bag shown">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-black-croc.png" class="satchel-static satchel-body">
<!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-collar-blue-python.png" class="satchel-3 satchel-collar"> -->
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-black-croc.png" class="satchel-static satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-black-croc.png" class="satchel-static satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-black-croc.png" class="satchel-static satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-marble-python.png" class="satchel-static satchel-narrow">
</div>
<div id="bag2" class="bag">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-marble-python.png" class="satchel-1 satchel-body">
<!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-collar-bone.png" class="satchel-4 satchel-collar"> -->
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-marble-python.png" class="satchel-1 satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-marble-python.png" class="satchel-1 satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-marble-python.png" class="satchel-1 satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-blue-python.png" class="satchel-1 satchel-narrow">
</div>
<div id="bag3" class="bag">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-celedon.png" class="satchel-2 satchel-body">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-celedon.png" class="satchel-2 satchel-gusset">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-celedon.png" class="satchel-2 satchel-piping">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-celedon.png" class="satchel-2 satchel-strap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-celedon.png" class="satchel-2 satchel-narrow">
</div>
CSS (替换了这几行代码的所有CSS3动画)
.bag img {
z-index: 0;
opacity: 0;
-webkit-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
}
.shown img {
opacity: 1;
}
.shown img.satchel-strap, .shown img.satchel-narrow {
z-index: 2;
}
.bag .fadeIn {
opacity: 1;
z-index: 1;
}
.bag .fadeIn.satchel-strap, .bag .fadeIn.satchel-narrow {
z-index: 3;
}
jQuery (您可以设置动画参数)
$(document).ready(function() {
var $bags = [$('#bag1'), $('#bag2'), $('#bag3')],
piecesDelay = 400,
bagsDelay = 3000,
timePiecesID,
imgs;
setTimeout(function() {
loopThroughBags(1, 0);
}, bagsDelay);
function fadeInPieces(k) {
$(imgs[k]).addClass('fadeIn');
timePiecesID = setTimeout(function() {
if (k < imgs.length - 1) {
k++;
fadeInPieces(k);
} else {
clearTimeout(timePiecesID);
return;
}
}, piecesDelay);
} // fadeInPieces ends
function loopThroughBags(i, j) {
imgs = $bags[i].find('img');
fadeInPieces(0);
setTimeout(function() {
clearTimeout(timePiecesID);
$bags[i].addClass('shown');
$(imgs).removeClass('fadeIn');
$bags[j].removeClass('shown');
j = i;
i = (i < $bags.length - 1) ? i + 1 : 0;
loopThroughBags(i, j);
}, bagsDelay);
} // loopThroughBags ends
});