Animation transform и IE10-11

61

Green arrow

4 июля 2016, 13:51

476

Доброго времени.

Подскажите, что с данными стилями не так? По идее IE10 и 11 должны понимать анимацию эту, но на деле абсолютная статика. Во всех других браузерах норм.

<html>

<head>

<style>

body {

background: #fff;

}

.test {

    animation: 1s ease-in-out 0s infinite running test-anim;

    background: #000;

    height: 38px;

    margin: 100px;

    width: 38px;

}

@keyframes test-anim {

0% {

    transform: rotate(0deg) scale(1) skew(1deg);

}

10% {

    transform: rotate(-25deg) scale(1) skew(1deg);

}

20% {

    transform: rotate(25deg) scale(1) skew(1deg);

}

30% {

    transform: rotate(-25deg) scale(1) skew(1deg);

}

40% {

    transform: rotate(25deg) scale(1) skew(1deg);

}

100%, 50% {

    transform: rotate(0deg) scale(1) skew(1deg);

}

}

</style>

</head>

<body>

<div  class="test"></div>

</body>

</html>

C

54

colorito

4 июля 2016, 14:09

#1

Я пальцем в небо, но может сначала нужно объявить test-anim, а потом применять?

Услуги по парсингу данных (/ru/forum/939826), единоразовый и регулярный сбор данных. Любые объемы. Скрипты на PHP, создание и доработка, решение проблем с сайтами Пишите в личные сообщения или скайп

GA

61

Green arrow

4 июля 2016, 17:39

#2

colorito:
Я пальцем в небо, но может сначала нужно объявить test-anim, а потом применять?

неа, значения не имеет (

--------------------------------

Вопрос решил.

По феншую, действительно, сначала @keyframes test-anim задаётся. Но главное вот в этом было:

animation: test-anim 1s ease-in-out 0s infinite;

Как обычно, отличился только IE

Курс биткоина превысил $50 тысяч

Переиграть и победить: как анализировать конкурентов для продвижения сайта