У меня есть разочаровывающая ошибка в Safari вокруг задержки анимации CSS.
Эта анимация прекрасно работает на рабочем столе в Chrome, Firefox, IE11, IE10, но я получаю смешанные результаты в Safari. Куски мешка должны отображаться после равного количества пауз (контролируемых задержкой анимации).
Desktop Safari будет иногда отображаться правильно, а в других случаях замедляется первая часть перехода пакета и ускоряется конец, или он будет сжимать несколько переходов вместе. В мобильном Safari и мобильном Chrome на iPhone 6 иногда он просто игнорирует задержку анимации и одновременно переводит весь пакет. У меня проблемы с поиском неисправностей, когда производительность не соответствует. Я добавил немного 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;
}
}