Ошибка CSS в других браузерах

Я использую код CSS от here для моего загрузчика сайта. У меня проблема с IE и Mozilla, все не выглядит и работает так, как предполагается.Ошибка CSS в других браузерах

В IE нет анимации и разрыва графики, а в Mozilla не анимация, и графика не выглядит правильно.

@bg: #2c3e50; 

/*.triangle(@triangle: border-left: 60px solid transparent; 
        border-right: solid transparent; 
        border-top: 0 solid transparent;);*/ 



body{ 
    background: @bg; 
} 

.loader { 
    border-radius: 50%; 
    margin: 0 auto; 
    position: absolute; 
    top: 40%; 
    left: 0; 
    right: 0; 
    height: 50px; 
    width: 50px; 
} 

.tri { 
    animation: translateRotation 1.5s infinite reverse; 
    -webkit-animation: translateRotation 1.5s infinite reverse; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
    border-top: 0 solid transparent; 
    border-bottom: 60px solid #00b4ff; 
    width: 0px; 
    z-index: 2; 
} 

.tri2 { 
    animation: translateRotation 1.5s infinite; 
    -webkit-animation: translateRotation 1.5s infinite; 
    border-left: 40px solid transparent; 
    border-right: 40px solid transparent; 
    border-top: 0px solid transparent; 
    border-bottom: 40px solid #ffde15; 
    width: 0px; 
    z-index: 1; 
} 

.tri3 { 
    animation: translateRotation 1.5s infinite; 
    -webkit-animation: translateRotation 1.5s infinite; 
    border-left: 40px solid transparent; 
    border-right: 40px solid transparent; 
    border-top: 40px solid #1da158; 
    border-bottom: 0px solid transparent; 
    width: 0px; 
    z-index: 1; 
} 

.tri4 { 
    animation: translateRotation 1.5s infinite reverse; 
    -webkit-animation: translateRotation 1.5s infinite reverse; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
    border-top: 60px solid #ea343f; 
    border-bottom: 0px solid transparent; 
    width: 0px; 
    z-index: 2; 
} 

.circ { 
    border: 30px solid rgba(255,255,255,0.1); 
} 

.circ2 { 
    border: 25px solid rgba(255,255,255,1); 
    box-sizing: border-box; 
    box-shadow: 0 2px 1px rgba(0,0,0, 0.15), 0 -2px 1px rgba(0,0,0, 0.15), -2px 0 1px rgba(0,0,0, 0.15), 2px 0 1px rgba(0,0,0, 0.15); 
    margin-top: 30px; 
    z-index: 90; 
} 
/* ANIMATE */ 

@-webkit-keyframes translateRotation { 
    0% { -webkit-transform: rotate(0deg); } 
    100% { -webkit-transform: rotate(360deg);} 
}

источник

2015-03-30 Johan H.

То есть из-за '-webkit-префиксом'. Если вам нужен что-то перекрестный браузер, вам нужно сделать все 3 варианта '-webkit-', '-moz-', а затем стандарт без префикса. Вам нужно будет сделать это для 'border-radius',' transform' и 'animation'. Престижность анимации, хотя – Adjit

и -ms- и -o- –

Статья для всех префиксов браузера [здесь] (http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm) – dowomenfart

Проблема заключается в том, что вы используете только @-webkit-keyframes вместо @keyframes и -webkit-transform вместо transform, которые поддерживаются без префиксов, так IE10 +

Вы должны добавить этот код выше вашей анимации ключевого кадра и должен работать на IE10 +:

@keyframes translateRotation { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg);} 
}

Остановитесь здесь keyframe-animation-syntax, чтобы увидеть все префиксы.

Для IE9 вы, вероятно, следует использовать Javascript анимацию как JQuery/jQueryUI, вы можете проверить, если необходимо использовать с помощью Modernizr

if(!Modernizr.cssanimations) { 
    // Fallback 
}

источник

2015-03-30 14:59:32 Matho

Ошибка CSS в других браузерах

ответ

Смежные вопросы