Przypadki użycia dla przejść CSS i animacji CSS

Question

O ile rozumiem, nie ma czegoś takiego, co możemy zaimplementować za pomocą przejść css, ale nie możemy tego zaimplementować za pomocą animacji css, ale nie odwrotnie.

Oznacza to, że każde przejście ma odpowiednik animacji css. Na przykład, ten

.ablock:hover {             
    position: relative;            
    -moz-transition-property: background-color, color;    
    -moz-transition-duration: 1s;         
    -webkit-transition-property: background-color, color;   
    -webkit-transition-duration: 1s;                
    color: red;              
    background-color:pink;           
} 

stanowi równowartość co następuje:

.ablock:hover { 
    -moz-animation-duration:1s;         
    -moz-animation-name:transition;        
    -webkit-animation-duration:1s;         
    -webkit-animation-name:transition;        
}  

@-moz-keyframes transition {          
    to {               
     color: red;            
     background-color: pink;         
    } 
}  

@-webkit-keyframes transition {         
    to {               
     color: red;            
     background-color: pink;         
    } 
} 

Moje pytanie brzmi - czy jest nam mówić o przeglądarce wspieranie zarówno przejścia CSS i animacje, jakie są przypadki użycia za wybór jednego lub inne podejście? Jeśli chodzi o przejścia, mogę wymienić tylko jeden - mają bardziej zwięzłą składnię, nie musimy kopiować wklejania ogromnych uchwytów kodu dla @ -moz-keyframes, @ -webkit-keyframes i tak dalej.

Jeśli chodzi o sterowanie z javascript, elastyczność i złożoność animacje są znacznie bardziej odpowiednie narzędzie (przynajmniej na pierwszy rzut oka). Jakie są przypadki użycia?

UPD: OK, pozwól mi spróbować wyświetlić interesujące informacje znalezione w pytaniach.

• Ten został wniesiony przez Romana Komarowa. Powiedzmy, że mamy div i div dziecka. Podczas gdy rodzic div jest ukryty, przenosimy element potomny. Gdy zabieramy mysz, przejście jest anulowane. Czas trwania tego anulowania to dokładnie czas, który już wydaliśmy na przeniesienie. Animacja jest anulowana "natychmiast". Nie wiem jednak, jak standardowe są te dwa zachowania.

Answer 1

• Animacje mogą być zapętlone (i mogą występować klatki kluczowe, yeeah).
• Przejścia mogą być bardziej elastyczne i można łatwo wprowadzać przejścia do różnych wartości iw różnych okolicznościach.

Chociaż można naśladować niektóre przejścia autorem animacji (jak wspomniałeś w swoim poście), przejścia są po prostu bardziej wydajne:

• Wystarczy powiedzieć, które właściwości trzeba animować iw jakich warunkach (przy użyciu różne selektory)
• można wywołać przejście na różne sposoby:
  1. Zmiana właściwości w CSS dla pseudo-klasyfikowany: hover,: aktywny itd. (Tworzenie czystym CSS UI)
  2. Zmiana właściwości w różnych klasach do różnych celów.
  3. Zmiana właściwości w stylach śródliniowych: w połączeniu z JS jest po prostu silniejsza niż animacje.

Answer 2

z przejściami jesteś w stanie przejść pomiędzy dowolnej wartości określonej nieruchomości, które chcesz być przeniesione. Jako przykład, chcesz przejść kolor łącza, kiedy to zatrzymuje się i aktywny:

a { 
    color: #000; 
    transition: color .4s ease; 
} 
a:hover { 
    color: #888; 
} 
a:active { 
    color: #faa; 
} 

Jesteś niezależny, który kolor wybrać. Teraz, jeśli chcesz użyć stylu animacji, musisz jawnie ustawić wartość koloru dla stanów animacji. I nie jesteś w stanie łatwo animować pomiędzy trzema stanami: normalnym, aktywnym i aktywnym. Potrzebujesz bardziej złożonych definicji. Postaram się ten jeden z animacji:

a { 
    color: #000; 
    animation-duration: 0.4s; 
    animation-fill-mode: forwards; 
    animation-name: toDefault; 
} 
a:hover { 
    animation-duration: 0.4s; 
    animation-fill-mode: forwards; 
    animation-name: toHover; 
} 
a:active { 
    animation-duration: 0.4s; 
    animation-fill-mode: forwards; 
    animation-name: toActive; 
} 
@keyframes toDefault { 
    to { 
     color: #000; 
    } 
} 
@keyframes toHover { 
    to { 
     color: #888; 
    } 
} 
@keyframes toActive { 
    to { 
     color: #faa; 
    } 
} 

Teraz ta nie obejmuje animację z powrotem do stanu sprzed. Nie jestem pewien, czy uda ci się to osiągnąć.

Krótko mówiąc: dzięki przejściom można animować niezdefiniowany zestaw właściwości i wartości, natomiast animacje klatek kluczowych są używane do dobrze zdefiniowanych animacji i/lub przejść.