Reprinted from Http://www.w3cplus.com/css3/using-multi-step-animations-transitions.html
CSS animations usage is simple and powerful, a complete animation requires only naming, @keyframes
keyframe definition, and binding to elements in three steps. Although the concept and use of CSS animations is relatively simple, but can create sophisticated animation, such as multi-step transition animation, this is the focus of this article to introduce to you.
Keyframe
If we set a keyframe for a background color for an element, such as turning the background from orange to black, then the orange color will fade over time to black, which can be said to have a transition effect from the CSS animations.
Body{Background:Black Animation:Color-me-in5s; /* Other keywords like "infinite alternate" can being useful here */} @keyframes color-me-in {/* you Could think of as "Step 1" */0% {< span class= "rule" >background: Orange } /* you could Think of as "Step 2" */100% {< span class= "rule" >background: Black }} /span>
Next we can add more transition colors:
@keyframes color-me-in {0%{Background: Orange; } /* Adding a step in the middle */50% Span class= "rules" >{background: Blue; } 100% {background: Black; }} /span>
In short: From the beginning of the animation to the end, there has been a transition effect is occurring.
Remove Motion Tweens
As you can see from the example above, there is a noticeable transition between color changes, and this default behavior is good in general. Typically, because animation-timing-function
of the default value ease
, animations tend to be linear
smoother and more vivid than the linear gradient effect.
If a step()
function is used to force a keyframe to execute at a specific point in time, it is no longer implemented as a result of a transition:
Multi-Step animation
Apple Music's sound equalizer is a classic example of multiple animations: multiple vertical bars with the rhythm of the music or the rise or fall. The following is an effect without animations:
Next, create an 25
animation that owns the frame and name it as the time of the equalize
animation for each frame, 4%
and then bind the animation to the .bar
element:
Although the effect is moving, there are some differences from what we expected: each vertical bar should be independent. Next, we'll .bar
add different animation-duration
animation properties for each, setting different animation times:
Done! When the rhythm rings, the animation will dance with it. There is also an optional attribute: animation-delay
. It supports negative time, allowing animations to move together simultaneously:
Transition
transition
As animation
simple as the usage, the abbreviated form is as follows:
.move-me { transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];}
Here we set the transition effect of the background to an element, changing the background color and width of the element when the mouse hovers over it:
. box{Width: 150px; Height: 150px; Background-color:Red transition: < Span class= "number" >1S; }.box:hover {width: 300px;background-color : Orange; /span>
Now the transition is happening at the same time, and there is a little distance from the multi-step transition.
Multi-Step transition
To mimic a multi-step animation, we can set multiple values for the transition property by commas, with the key being the usage duration
and delay
attributes:
.box { transition: /* step 1 */ width 1s, /* step 2 */ background 0.5s 1s;}
On this basis, we can further develop a more refined transition effect:
- When you hover over the mouse, it
1s
will width
150px
stretch from300px
1s
background-color
changes from red to orange when hovering over the mouse
- When the mouse hovers, the
1s
box-shadow
direction of the change within
- Add a line of text
width
to height
exit animation when and change from the left
- Add another line of text that moves from the right side when the current line disappears
/* Our box element */. box{Width: 150px; Height: 150px; Background-color:Red Box-shadow: 5px5px25px#000; Transition:All1s;}/* on hover ... */. box: hover{/* Increase width */Width: 300px; /* Change color */Background-color:Orange /* Move the shadow */Box-shadow:-5px5px25px#000;}/* The first line of text */. box__blurb{/* Start with full opacity and centered */Opacity: 1; Transform: TranslateX (45PX); /* Then transition these chained properties */Transition:Opacity0.5s2s, transform0.5s0.5s;}/* on. Box hover ... */. box: hover. box__blurb{/* Fade out */Opacity: 0; /* Move over to the right */Transform: TranslateX (-500px);}/* The second line of text */. rect__blurb{/* Start with no opacity and pushed off the element */Opacity: 0; Transform: TranslateX (500px); /* Then transition these chained properties */Transition:Opacity0.5s1s, transform0.5s1s;}/* on. Box hover ... */. box: hover.rect__blurb { /* face in */opacity: 1; /* while entering from the right */ transform : translatex (- 100px); } /span>
Here is an example of another multi-step transition that performs a multi-step transition when the mouse hovers over the button:
Summarize
Multi-step animations and transitions are extremely expressive CSS effects. The music equalizer above is a useful example, if you are interested in this, you can also look at the Ana Tudor this article "How I live-coded My most-hearted Pen" and Rémi Lacorn This example: Http://codepe N.io/rlacorne/pen/ekfkh.
Multi-step animations and transitions