Multi-step animations and transitions

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

transitionAs 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