Можно ли установить разные длительности/задержки для опций преобразования?

Я хочу установить несколько параметров преобразования для моего объекта html, но с разной продолжительностью и задержкой.

Если я попытаюсь использовать что-то вроде этого:

-webkit-transition: -webkit-transform, opacity;
-webkit-transform: rotate(180deg) scale(2); 
-webkit-transition-duration: 2000ms, 6000ms; 
-webkit-transition-delay: 0ms, 6000ms;

Тогда у меня будет другая функция времени для преобразования и непрозрачности, но я могу установить различные опции для поворота и масштабирования, например. вращать в течение 10 секунд и масштабировать 20 с?

Ответы

Ответ 2

Да, вы можете сделать это напрямую с помощью анимации CSS3. Если у вас есть преобразование непрозрачности от 0 до 1, которое длится 20 секунд и 90-градусное вращение, которое длится 10 секунд, то вы создаете ключевой кадр через 10 секунд с непрозрачностью .5 и поворот на 90 градусов и другой ключевой кадр в 20 секунд с непрозрачностью 1 и поворот на 90 градусов. Это боль, но она будет работать. Вложенные divs немного чище (как говорит Дуг выше)

Хорошо здесь код:

@-webkit-keyframes foo {
 0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0;
 }
 50% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0.5;
 }

 100% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    opacity: 1;
 }

И вы положили

-webkit-animation-duration: 20s;

в ваш HTML.

Ответ 3

Это было бы проблемой сделать это, как сказал Дуг, если у вас есть 3D-перспектива в вашей анимации. Вероятно, вы можете использовать "transform-style: preserve-3d", но он не работает в IE 10-11 и работает странно во всех других браузерах, кроме Firefox. Поэтому единственное решение, которое я считаю, - использовать анимацию CSS3. В вашем случае это будет:

@-webkit-keyframes rotate_scale {

    0% {
        -webkit-transform: rotate(0deg) scale(0);
     }
     50% {
        -webkit-transform: rotate(90deg) scale(0);
     }
     100% {
        -webkit-transform: rotate(180deg) scale(2);
     }
}
@keyframes rotate_scale {

    0% {
        transform: rotate(0deg) scale(0);
     }
     50% {
        transform: rotate(90deg) scale(0);
     }
     100% {
        transform: rotate(180deg) scale(2);
     }
}

Таким образом, вы можете установить самую длинную продолжительность ваших преобразований. Например, 20 секунд для вращения: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; И затем просто вычислите, когда начнется ваше другое преобразование. В масштабе экзамена начинается через десять секунд после ротации. Таким образом, это будет половина полного времени (50%). И это продолжалось бы 10 секунд так до конца полного времени (100%). Но если вы хотите сделать масштаб продолжительностью 5 секунд, например, вам нужно будет добавить новый ключевой кадр 75% { transform: rotate(135deg) scale(2); } и записать там два преобразования.