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

Question

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

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

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

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

Answer 1

Вероятно, не напрямую, но тот же эффект может быть достигнут Гнездовые элементы.

Answer 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.

Answer 3

Это было бы проблемой сделать это, как Дуг сказал, что если у вас есть 3D-перспектива в вашей анимации. Вероятно, вы могли бы использовать «стиль преобразования: PRESERV-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); } И напиши туда два трансформируется.