Можно ли установить различную продолжительность / задержку для параметров преобразования? - PullRequest
Новая
       20

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

11 голосов
/ 02 сентября 2010

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

Если я попытаюсь использовать что-то подобное: 

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

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

Ответы [ 3 ]

11 голосов
/ 09 сентября 2010

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

Хорошо, вот код: 

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

6 голосов
/ 02 сентября 2010

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

0 голосов
/ 30 апреля 2014

Было бы проблемой сделать это, как сказал Дуг, если у вас есть 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); } и записать туда два преобразования.

...