Transitions
and Animations
Flashcards
"flip!"

What CSS property is used to create an anamated flow between two different states of an element? How is this property used?
Transition, 
{transition:color 2s}
How can you cause the start of a transition to occur after the element normally would have changed appearence? 
{transition-delay 1s}
What are the different inputs that can be used with the "transition-timing-function" property? 
linear
ease
ease-in
ease-out
ease-in-out
What type of rule is @keyframes? How is a simple, two-step animation set up?
at-rule,
@keyframes name {
from {}
to {}
}
How is a animation with three or more steps set up? Is it possible to have uneven divisions of time with multiple frames? 
@keyframes name {
0% {}
50% {}
100% {}
}
Yes, change the values of the percentages to when that process should start and the previous one should end.
Are there delay and movement style propertys for animations? What are the property names?
Yes, 
animation-delay
animation-timing-
  function
What are the three additional properties that animations have, but transitions don't? What does each of them add? 
animation-direction
animation-iteration-count
animation-fill-mode
whether it plays start to end or end to start; how many times it should play; whether it should keep the 0 and 100% properties before and after playing.
You know all about setting up an animation, but how is one actually implemented on an element? 
div {
animation-name:name
animation-duration:3s
}

To reveal answers, hover over a card for at least 1 second.

Back to Assignments.