2015-09-24 3 views
0

В настоящее время работает над моим настраиваемым плагином jquery, для которого требуется только запуск jquery.CSS3 Анимация для IE9

Я не хочу включать дополнительные сторонние плагины jquery.

У меня есть анимация CSS3, запущенная на моей кнопке поиска при нажатии, которая отлично работает, за исключением ie9. CSS выглядит следующим образом:

.loader { 
    display: block; 
    width: 25px; 
    height: 25px; 
    border-radius: 50%; 
    border: 3px solid transparent; 
    border-top-color: #fff; 
    outline:none; 
    -webkit-animation: spin 1s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
    animation: spin 1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */ 
    font-size:0; 
    line-height:0 
} 

@-webkit-keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(0deg); /* IE 9 */ 
     transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
    100% { 
     -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(360deg); /* IE 9 */ 
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
} 
@keyframes spin { 
    0% { 
     -webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(0deg); /* IE 9 */ 
     transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
    100% { 
     -webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */ 
     -ms-transform: rotate(360deg); /* IE 9 */ 
     transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */ 
    } 
} 

Однако он не работает в IE9, является чистым CSS решение, которое я могу сделать в IE9, чтобы получить эту работу?

+0

Извините, но анимация не поддерживаются в IE9. http://caniuse.com/#feat=css-animation Не повезло с CSS! –

+0

Есть ли способ сделать резервную копию для IE9 в CSS – StevieB

+0

Вы можете сделать резервную копию для преобразования с использованием префикса '-ms-', но анимации CSS не имеют никакого резерва для IE9. –

ответ

0

Анимация, переход и преобразования не поддерживаются в IE9 или ниже. Есть поддержка для них из IE 10+, но даже в этом случае есть много проблем, которые пользователи находят при работе с IE. Лучше всего сделать, это работать с javascript. С javascript вы можете избежать CSS3 animations и лучше всего выполнять свои результаты даже в IE.

Для глядя на совместимость браузера для animations, transitions and transformations посмотреть на этой ссылке: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Browser_compatibility

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