Баги CSS анимации

На этой странице будут показаны баги CSS анимаций с запускаемыми примерами кода.

Содержание

Баг разных форматов

Описание

Заключается в том, что при указании относительного или абсолютного значения анимация перестаёт проигрываться при условии, что у элемента установлен другой формат значения для этого же свойства.

Этому багу подвержена Opera 12.14 - на движке Presto, и, может быть, другие её версии.

В последних версиях FireFox, Chromium всё в порядке. Internet Explorer НЕ ОТТЕСТИРОВАН

Наведите указателем мыши на квадрат, чтобы проиграть тест — квадрат должен плавно изменить ширину до конца блока, в который обёрнут.

Снизу должен быть квадрат — не прямоугольник.

Запускаемый пример

Исходный код для этого примера

HMTL

<div class="testcase">
    <!-- простой кубик для теста -->
</div>

JavaScript

/* скриптов нет, всё на CSS */

CSS

Ниже приведён CSS для этого теста.

Обратите внимание на значение свойства width в блоке ключевых кадров, и в правиле для самого элемента — в блоке ключевых кадров указано относительное значение 100%, а в правиле для элемента — абсолютное 50px

@-webkit-keyframes test-dimension { 
    100% { 
        width: 100%;
    }
}
@-moz-keyframes test-dimension { 
    100% { 
        width: 100%;
    }
}

@-o-keyframes test-dimension { 
    100% { 
        width: 100%;
    }
}
@keyframes test-dimension { 
    100% { 
        width: 100%;
    }
}

.testcase {
    
    width: 50px;
    
    -webkit-animation-name: test-dimension;
    -webkit-animation-duration: 2s;
    -webkit-animation-play-state: paused;
    
    -moz-animation-name: test-dimension;
    -moz-animation-duration: 2s;
    -moz-animation-play-state: paused;
    
    -o-animation-name: test-dimension;
    -o-animation-duration: 2s;
    -o-animation-play-state: paused;
    
    animation-name: test-dimension;
    animation-duration: 2s;
    animation-play-state: paused;
}
.testcase:hover {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}