Возможно ли установить различные значения длительности/задержки для параметров преобразования?

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

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

Answer 2

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

Ok вот код:

@-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-перспектива в вашей анимации. Вероятно, вы можете использовать «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); } и записать там два преобразования.