Почему моя анимация Edge CSS становится не синхронизированной c? - PullRequest
Новая
       23

Почему моя анимация Edge CSS становится не синхронизированной c?

0 голосов
/ 03 февраля 2020

Может кто-нибудь объяснить, как мой код ниже может выйти из строя c в Microsoft Edge. Если вы смотрите несколько циклов (10se c), анимация затухания и движения не синхронизирована c, и она выглядит неправильно. Он должен исчезнуть, а затем сбросить поля позади центральной, прежде чем открывать. Каждый l oop делает его все дальше и дальше несинхронным c. 

.rhu_bswn_packages {
    position:relative
}

.rhu_bswn_red_package {
    position:absolute;
    width: 33%;
    left: 10%;
    top: 7%;
}
.rhu_bswn_blue_package {
    position:absolute;
    width: 39%;
    left: 32%;
    z-index: 3;
}
.rhu_bswn_gold_package {
    position:absolute;
    width: 33%;
    left: 60%;
    top: 12%;
}

.rhu_bswn_red_package {
    -webkit-animation:rhu_fade_and_rotate_reveal_red 10s infinite;
            animation:rhu_fade_and_rotate_reveal_red 10s infinite;
    opacity:0.01;
    left:34%
}

@-webkit-keyframes rhu_fade_and_rotate_reveal_red {
    0% { -webkit-transform:scale(0) rotate(6deg); transform:scale(0.01) rotate(6deg); left:34%; opacity:0; }
    10% { -webkit-transform:scale(1) rotate(6deg); transform:scale(1) rotate(6deg); left:34%; opacity:1; }
    20% { left:10%; -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); }
    80% { left:10%; -webkit-transform:scale(1); transform:scale(1); opacity:1; }
    99% { opacity:0; -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); left:10%; }
    100% { left:34%; opacity:0; }
}

@keyframes rhu_fade_and_rotate_reveal_red {
    0% { -webkit-transform:scale(0) rotate(6deg); transform:scale(0) rotate(6deg); left:34%; opacity:0; }
    10% { -webkit-transform:scale(1) rotate(6deg); transform:scale(1) rotate(6deg); left:34%; opacity:1; }
    20% { left:10%; -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); }
    80% { left:10%; -webkit-transform:scale(1); transform:scale(1); opacity:1; }
    99% { opacity:0; -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); left:10%; }
    100% { left:34%; opacity:0; }
}

.rhu_bswn_gold_package {
    -webkit-animation:rhu_fade_and_rotate_reveal_gold 10s infinite;
            animation:rhu_fade_and_rotate_reveal_gold 10s infinite;
    opacity:0;
    left:34%;
}

@-webkit-keyframes rhu_fade_and_rotate_reveal_gold {
    0% { -webkit-transform:scale(0) rotate(6deg); transform:scale(0) rotate(6deg); left:34%; opacity:0; }
    10% { -webkit-transform:scale(1) rotate(6deg); transform:scale(1) rotate(6deg); left:34%; opacity:1; }
    20% { left:60%; -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); }
    80% { left:60%; opacity:1; }
    99% { opacity:0; -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); left:60%; }
    100% { left:34%; opacity:0; }
}

@keyframes rhu_fade_and_rotate_reveal_gold {
    0% { -webkit-transform:scale(0) rotate(6deg); transform:scale(0) rotate(6deg); left:34%; opacity:0; }
    10% { -webkit-transform:scale(1) rotate(6deg); transform:scale(1) rotate(6deg); left:34%; opacity:1; }
    20% { left:60%; -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); }
    80% { left:60%; opacity:1; }
    99% { opacity:0; -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); left:60%; }
    100% { left:34%; opacity:0; }
}

.rhu_bswn_blue_package {
    -webkit-animation:rhu_fade_and_rotate_reveal_blue 10s infinite;
            animation:rhu_fade_and_rotate_reveal_blue 10s infinite;
    opacity:0;
}

@-webkit-keyframes rhu_fade_and_rotate_reveal_blue {
    0% { -webkit-transform:scale(0) rotate(9deg); transform:scale(0) rotate(9deg); opacity:1; }
    10% { -webkit-transform:scale(1) rotate(9deg); transform:scale(1) rotate(9deg); opacity:1; }
    20% { -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); }
    80% { -webkit-transform:scale(1); transform:scale(1); opacity:1; }
   	99% { opacity:0; -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); }
}

@keyframes rhu_fade_and_rotate_reveal_blue {
    0% { -webkit-transform:scale(0) rotate(9deg); transform:scale(0) rotate(9deg); opacity:1; }
    10% { -webkit-transform:scale(1) rotate(9deg); transform:scale(1) rotate(9deg); opacity:1; }
    20% { -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); }
    80% { -webkit-transform:scale(1); transform:scale(1); opacity:1; }
   	99% { opacity:0; -webkit-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); }
}
<div class="rhu_bswn_packages">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRGdxdUWpcUYiwE4ezU0rpIyRC_YdT356UVnoEAa5D3SQkFhIbo" class="rhu_bswn_red_package" />
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTjiEbXaySZqDjpnx4M0ClnOcsrVrDHattx-K2n4ufxEEUR1PB5" class="rhu_bswn_blue_package" />
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQpcuQfLixcr0KV10mHN34i2Hxe2mU5q1VyTOmN9Ju3js-nx17R" class="rhu_bswn_gold_package" />
</div>
...