Czy można ustawić inny czas/opóźnienie dla opcji transformacji?

Question

Chcę ustawić kilka opcji transformacji dla mojego obiektu HTML, ale z różnym czasem trwania i opóźnieniem.

jeśli staram się używać coś takiego:

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

wtedy będę mieć inną funkcję czasową dla transformacji i krycie ale mogę ustawić różne opcje obracania i skali, na przykład obracać przez 10 sekund i przeskalować 20 sekund?

Answer 1

Prawdopodobnie nie bezpośrednio, ale ten sam efekt można osiągnąć przez nesting elements.

Answer 2

Tak, możesz to zrobić bezpośrednio za pomocą animacji CSS3. Jeśli masz przekształcenie nieprzezroczystości z 0 na 1, które trwa 20 sekund, i obrót o 90 stopni, który trwa 10 sekund, tworzysz klatkę kluczową w 10 sekund z kryciem .5 i obrotem o 90 stopni i kolejną klatką kluczową w 20 sekund z kryciem 1 i obrót o 90 stopni. To rodzaj bólu, ale zadziała. Gniazdowania div jest nieco czystsze (jak mówi Doug powyżej)

Ok oto kod:

@-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; 
} 

I chcesz umieścić

-webkit-animation-duration: 20s; 

do kodu HTML.

Answer 3

Byłoby trudno zrobić to tak jak powiedział Doug, jeśli masz wizję 3D w swojej animacji. Prawdopodobnie możesz użyć "transform-style: preserve-3d", ale nie działa w IE 10-11 i działa dziwnie we wszystkich innych przeglądarkach poza Firefoksem. Więc jedynym rozwiązaniem, które myślę, jest użycie animacji CSS3. W twoim przypadku będzie to:

@-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); 
    } 
} 

Dzięki temu możesz ustawić najdłuższy czas swoich transformacji. Na przykład 20 sekund na obrót: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; A potem obliczyć, kiedy rozpocznie się kolejna transformacja. W skali egzaminu rozpoczyna się w dziesięć sekund po obrocie. Tak więc będzie to połowa całego czasu (50%). A trwałoby to 10 sekund, aż do końca pełnego czasu (100%). Ale jeśli chcesz na przykład wykonać 5-sekundową skalę, musisz dodać nową klatkę kluczową 75% { transform: rotate(135deg) scale(2); } i zapisać tam dwie transformacje.