CSS3 Scale, Fade и Spin на одном элементе (почему не работает SCALE?!?)

ОК, нубс. Нужно, чтобы этот круг масштабировался и исчезал один раз в начале анимации (во время вращения) и продолжал вращаться после этого. Не так сложно, верно!?! Работает на затухание и вращение, но масштаб просто отказывается работать!

Где-нибудь толстый палец? Прежде чем вырвать оставшиеся у меня волосы, пожалуйста, разоблачите мою шероховатость и почему не работает SCALE? Спасибо, вот и все...

Только последний FF. (Лень кодировать для всего остального.)

JS Fiddle ПРИМЕР

<!DOCTYPE html>
<html>
<head>
<style> 
div
{width: 100px;
height: 100px;
background: transparent;
border: solid 10px blue;
border-radius: 50%;
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;

-moz-animation-name: scaleIn,fadeIn,spin;
-moz-animation-duration: 1s,1s,1s;
-moz-animation-timing-function: ease-in,ease-in,linear;
-moz-animation-delay: 0,0,0;
-moz-animation-iteration-count: 1,1,infinite;
-moz-animation-direction: normal,normal,normal;
-moz-animation-fill-mode: forwards,forwards,forwards;
-moz-animation-play-state: running,running,running;}

@-moz-keyframes scaleIn
{
from    {-moz-transform: scale(2);}
to      {-moz-transform: scale(1);}
}

@-moz-keyframes fadeIn
{
from   {opacity: 0.0;}
to     {opacity: 1.0;}
}

@-moz-keyframes spin
{
from  {-moz-transform: rotate(0deg);}
to    {-moz-transform: rotate(360deg);}
}

</style>
</head>
<body>
<div></div>
</body>
</html>
Источник

1 ответ

Решение

Это потому что -moz-transform:rotate() имеет приоритет -moz-transform:scale(), Они должны быть вместе

jsFiddle

@-moz-keyframes transformIn {
    from {
        -moz-transform: scale(2) rotate(0deg);
    }
    to {
        -moz-transform: scale(1) rotate(360deg);
    }
}

Что касается того, как заставить его вращаться и масштабировать, а затем просто вращать, вам нужно будет сделать еще один @keyframes

jsFiddle

@-moz-keyframes transformAnim {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform:  rotate(360deg);
    }
}

К вашему сведению -moz-animation-fill-mode Правило нарушало 3-ю анимацию для меня: не знаю почему, похоже, что удаление работает нормально.

Источник
Другие вопросы по тегам