preface

In CSS Magic: Transition Is Fun, we learned that simple tween animations can be implemented using Transition. How simple is transtion suitable for animation? The answer is — we just need to define the state of the start and end frames of the animation. Once the keyframe count is greater than 2, we must turn to the CSS Animation. This article is the record of this period of learning, welcome to clap brick.

This section introduces CSS Animation rules and properties

Define keyframe animation

Grammar:

@keyframes <Animation Name> {
  [<Animation Time Offset> {
    /* CSS Properties */
  }]*
}Copy the code

Example:

@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}Copy the code

Note: 1. Naming conventions of

/ / name you need to follow these rules const rIsInvalid = / ^ - | ^ [0-9] + - | ^ (? :unset|initial|inherit|none)$/ , rIsValid = /^[0-9a-z-_\\]+$/i function isValidAnimationName(animationName: string): boolean{ return ! rIsInvalid.test(animationName) && rIsValid(animationName) }Copy the code

2.

Is 0-100%, from, equivalent to 0%, to, equivalent to 100%. The @keyFrames CSS rule does not support cascading styles, so when multiple keyframes of the same Name appear, only the last one is valid.

/* Invalid */ @keyframes rotate {from {transform: rotate(0deg); } to { transform: rotate(360deg); @keyframes rotate {from {transform: rotate(90deg); } to { transform: rotate(-360deg); }}Copy the code

Similar to the @keyframes CSS rule, the same keyframes do not overlap. Only the last one is considered valid. But in reality, both FireFox14+ and Chrome are designed to stack keyframes.

@keyframes rotate { from { transform: rotate(0deg); } from { background: red; Rotate (0deg); rotate(0deg); rotate(0deg); background: red; } */ to { transform: rotate(360deg); background: yellow; }}Copy the code

5.! Important causes the property to be invalid. Important gives the CSS property the maximum weight, but invalidates the CSS property at @keyframes.

@keyframes rotate { from { transform: rotate(90deg); background: red! important; } to {transform: rotate(-360deg); }}Copy the code

6. At least two keyframes must be provided

*/ @keyframes move-left{to {left: 100px; }}Copy the code

Use animation

<css-selector> {
  animation: <animation-name>
             <animation-duration>
             <animation-timing-function>
             <animation-delay>
             <animation-iteration-count>
             <animation-direction>
             <animation-fill-mode>
             <animation-play-state>;
}Copy the code

Example:

.box.rotate {
  animation: rotate 10s infinite alternate;
}Copy the code

Introduction to Subproperties


specifies the name of the tween animation defined by @keyframes.

, animation duration, default is 0s. The unit is S and ms.

, the animation playback delay is 0s by default. The unit is S and ms. < animation-rotund-count >, the number of times the animation is repeated. The default is 1, and infinite means an infinite loop. The total animation playback duration is

*

. < animation direction – >, optional value of normal | reverse | alternate | alternate – reverse, respectively the flash sequence from the from to the to, from the to to the from, From to to to from and from to to from and from to to to. Note: Set the alternate | alternate – reverse, animation – iteration – count must be greater than 1 can see effect < animation – fill – mode >, Optional value to none | recently | backwards | to both, is used to set whether the animation before and after application of 0% and 100% of the style elements. Indicates that none is applied, 100% styles are applied, 0% styles are applied during delay, and 0% and 100% styles are applied. Note:




  1. By default (None), the animation returns to the style before the animation;
  2. To be able, the value must be greater than 0.

    <animation-play-state>And optional valuesrunning | pausedGets and sets the playback state.Note: With this property, we can only pause and continue playing, not replay, let alone play back

    <animation-timing-function>Is used to set the easing function type and the value isease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps(<integer>, <flag>) | frames(<integer>) | cubic-bezier(<number>,<number>,<number>,<number>).

    Among themease | ease-in | ease-out | ease-in-out | linear | cubic-bezier(<number>,<number>,<number>,<number>)The effect is continuous gradient, whilestep-start | step-end | steps(<integer>, <flag>) | frames(<integer>)Is the mutation effect. Let’s dig deeper into the latter.

It’s a slow functionstepDisambiguation project

Step-start is actually equivalent to steps(10, start), and step-end is equivalent to steps(10), so we just need to understand steps(< INTEGER >,

).

<animation-duration> <animation-duration> <animation-duration> <animation-duration> <animation-duration> <animation-duration> Specific applications are: elves walked, typing game effects * < number_of_steps > - the refresh frequency between two key frames * < direction > - direction, optional value of end | start. * end is the default value, indicating that the animation ends as soon as the animation ends. * start indicates the effect of executing the first keyframe immediately after the animation begins. */ steps(<number_of_steps>, <direction>)Copy the code

Explanation stolen from Zhang Xuxin:

Start: indicates the start. That is, a distance segment has been executed before time begins. Thus, the five staging points for animation execution are the following five, with the starting point ignored because the second point is immediately reached at the beginning of time:



End: Come to an abrupt end. That is, as soon as time ends, the current distance displacement stops. Thus, the five staging points for animation execution are the following five, and the end points are ignored because there is no time to execute the end points:

Also by setting < animation-fence-mode > to forward, the style of the last keyframe of the animation will be displayed (held) when

is set to end.

The event

const target = document.getElementById("target") target.addEventListener("animationstart", E => {// trigger when animation starts}) target.addEventListener(" animationIteration ", E => {// it is triggered every time the animation is repeated. // It is not triggered when <animation-iteration-count> is 1. }) target.addEventListener(" animationEnd ", e => {// triggered when the animation ends})Copy the code

Do whatever it takes to get the replay effect

At this point we can define and apply the CSS Animation via @keyframes, but can we gain more control over the Animation’s effects? Such as start, pause, continue, replay. It’s easy to start, pause, and continue with

, but not so easy to replay.

function pause (target: HTMLElement):boolean { const isRunning = target.style.animationPlayState == "running" if (isRunning) { target.style.animationPlayState = "paused" } return isRunning } function play (target: HTMLElement):boolean { const isStop = target.style.animationPlayState == "paused" if (isStop) { target.style.animationPlayState = "running" } return isStop } function replay (target: HTMLElement, animationClassName: String):void {// First remove the animation target.classList.remove(animationName) // requestAnimationFrame callback will be executed before the next interface rendering RequestAnimationFrame (_ => {// The effect of animation is still there, so we need to wait for the interface to render before enabling animation again, RequestAnimationFrame (_ => {target.classList.add(animationName)})}Copy the code

conclusion

CSS3 gives us animation effects, in addition to providing richer controllability than Transition and an API that’s easier to control than JavaScript, it also lets us use the GPU for acceleration. https://www.cnblogs.com/fsjohnhuang/p/9289618.html ^ ^ fat John

reference

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

https://designmodo.com/steps-css-animations/

http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/

http://jsfiddle.net/simurai/CGmCe/

https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/

Scan this article if you find it interesting! Donation mutual encouragement!