CSS анимация кросс-браузерная совместимость - PullRequest
Новая
       7

CSS анимация кросс-браузерная совместимость

0 голосов
/ 20 февраля 2019

Я создал анимированный логотип CSS со всем кодом анимации внутри одного и того же файла SVG, чтобы на него можно было загружать или ссылаться, и анимация воспроизводилась без каких-либо дополнительных усилий.Кажется, что он работает нормально, за исключением браузеров Microsoft и iPhone (протестировано на Safari и Chrome).В Internet Explorer анимация не воспроизводится почти полностью.На платформах iOS анимация воспроизводится, но, похоже, некоторые инструкции игнорируются или неправильно интерпретируются.В частности:

• Инструкция по шкале, предназначенная для создания мигающих глаз, похоже, имеет другое происхождение, заставляя глаза двигаться вместо масштабирования на месте.

• Ушные ушные раковины не "вращая».На самом деле они вращаются, но они должны двигаться вместе с остальными элементами, и вместо этого они просто вращаются на месте.Похоже, что инструкции по переводу игнорируются.

Вот ссылка на файл.

https://clevergap.staging.wpengine.com/wp-content/uploads/2019/02/pet-friendly-logo-anim-01-3.svg

Вот CSS для областей, которые отображаются неправильнов iOS. 

@keyframes eyes-anim {
  0% {transform: scale(1, 0) translate(0, 0); transform-origin: 50% 50%;}
  24% {transform: scale(1, 0) translate(0, -22.5%); transform-origin: 50% 27.5%;}
  26% {transform: scale(1, 1) translate(0, 0%); transform-origin: 50% 50%;}
  28% {transform: scale(1, 0) translate(0, -22.5%); transform-origin: 50% 27.5%;}
  30% {transform: scale(1, 1) translate(0, 0%); transform-origin: 50% 50%;}
  65% {transform: scale(1, 1) rotateZ(0deg); transform-origin: 50% 35%;}
  67% {transform: scale(1, 1) rotateZ(15deg); transform-origin: 50% 35%;}
  90% {transform: scale(1, 1) rotateZ(15deg); transform-origin: 50% 35%;}
  93% {transform: scale(1, 1) rotateZ(0deg); transform-origin: 50% 35%;}
  100% {transform: scale(1, 1) rotateZ(0deg); transform-origin: 50% 35%;}
}

@keyframes earlobe-right-anim {
  0% {transform: scale(0, 0) translate(0, 0); transform-origin: 65% 11.25%;}
  43% {transform: scale(0, 0) translate(0, 0); transform-origin: 65% 11.25%;}
  45% {transform: scale(1.1, 1.1) translate(0, 0); transform-origin: 65% 11.25%;}
  49% {transform: scale(.95, .95) translate(0, 0); transform-origin: 65% 11.25%;}
  53% {transform: scale(1, 1) translate(0, 0); transform-origin: 65% 11.25%;}
  65% {transform: scale(1, 1) translate(0, 0) rotateZ(0deg); transform-origin: 65% 11.25%;}
  67% {transform: scale(1, 1) translate(6%, 4.4%) rotateZ(-25deg); transform-origin: 65% 11.25%;}
  70% {transform: scale(1, 1) translate(6%, 4.4%) rotateZ(25deg); transform-origin: 65% 11.25%;}
  72% {transform: scale(1, 1) translate(6%, 4.4%) rotateZ(17deg); transform-origin: 65% 11.25%;}
  76% {transform: scale(1, 1) translate(6%, 4.4%) rotateZ(20deg); transform-origin: 65% 11.25%;}
  90% {transform: scale(1, 1) translate(6%, 4.4%) rotateZ(20deg); transform-origin: 65% 11.25%;}
  94% {transform: scale(1, 1) translate(0, 0) rotateZ(-10deg); transform-origin: 65% 11.25%;}
  97% {transform: scale(1, 1) translate(0, 0) rotateZ(5deg); transform-origin: 65% 11.25%;}
  100% {transform: scale(1, 1) translate(0, 0) rotateZ(0deg); transform-origin: 65% 11.25%;}  
}

@keyframes earlobe-left-anim {
  0% {transform: scale(0, 0) translate(0, 0); transform-origin: 35% 11.25%;}
  43% {transform: scale(0, 0) translate(0, 0); transform-origin: 35% 11.25%;}
  45% {transform: scale(1.1, 1.1) translate(0, 0); transform-origin: 35% 11.25%;}
  49% {transform: scale(.95, .95) translate(0, 0); transform-origin: 35% 11.25%;}
  53% {transform: scale(1, 1) translate(0, 0); transform-origin: 35% 11.25%;}
  65% {transform: scale(1, 1) translate(0, 0) rotateZ(0deg); transform-origin: 35% 11.25%;}
  67% {transform: scale(1, 1) translate(6%, -3%) rotateZ(25deg); transform-origin: 35% 11.25%;}
  72% {transform: scale(1, 1) translate(6%, -3%) rotateZ(-25deg); transform-origin: 35% 11.25%;}
  75% {transform: scale(1, 1) translate(6%, -3%) rotateZ(-17deg); transform-origin: 35% 11.25%;}
  77% {transform: scale(1, 1) translate(6%, -3%) rotateZ(-20deg); transform-origin: 35% 11.25%;}
  90% {transform: scale(1, 1) translate(6%, -3%) rotateZ(-20deg); transform-origin: 35% 11.25%;}
  93% {transform: scale(1, 1) translate(0, 0) rotateZ(10deg); transform-origin: 35% 11.25%;}
  96% {transform: scale(1, 1) translate(0, 0) rotateZ(-5deg); transform-origin: 35% 11.25%;}
  100% {transform: scale(1, 1) translate(0, 0) rotateZ(0deg); transform-origin: 35% 11.25%;}  
}

#Earlobe-Left path {
    animation-name: earlobe-left-anim;
    animation-duration: 7000ms;
    animation-timing-function: ease-in-out;
}
#Earlobe-Right path {
    animation-name: earlobe-right-anim;
    animation-duration: 7000ms;
    animation-timing-function: ease-in-out;
}

#Eyes circle, #Eyes ellipse, #Eyes path {
    animation-name: eyes-anim;
    animation-duration: 7000ms;
    animation-timing-function: ease-in-out;
}
...