Geek Answers Handbook

Usage examples for CSS transitions and CSS animations

As far as I understand, there is no such thing that we can implement using css transitions, but we cannot realize the use of css animation, but not vice versa.

That is, any transition has the equivalent of css animation. For example, this

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

is equivalent to the following:

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

My question is: if we are talking about a browser that supports both css transitions and animations, what are the options for using this or that approach? As for the transitions, I can only name one - they have a more concise syntax, we do not need to copy the paste huge ammo code for @ -moz-keyframes, @ -webkit-keyframes, etc.

javascript, - ( , ). , ?

UPD:, , .

  • . , div div. div , . , . - , . "". , , .
+5
2
  • ( , yeeah).
  • , .

( ), :

  • , ( )
  • -:
    • CSS : hover,: active .. ( CSS-)
    • .
    • : JS , .
+8

, . , , :

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

, . , , . : , . . :

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

. , .

: undefined, / .

+1

More articles:


All Articles