[CSS3] CSS3 animation — I am one step closer to the cool front end

The blog instructions

Part of the information involved in this article comes from the Internet, as well as my own summary and views. The purpose of sharing is to build the community and consolidate myself. If the information cited infringement, please contact me to delete! Thank god I was here. Thank you for coming!

instructions

CSS3 can animate HTML elements without using JavaScript or Flash.

In order to learn the front end of the dynamic effect, I simply did everything. For now, I’m going to do a wave of CSS animation.

What is animation

⭕ Old rules, question beginning.

Specify keyframes on the time nodes that need to change. Keyframes are the style defined at the moment. For example, IF I move 5m to the left in 1s and 15m to the left in 3s, then there will be two key frames. Because of these two key frames, the picture will be shifted and the animation will be generated.

The following statement sums it up nicely: animation gradually changes elements from one style to another.

CSS3 animation mainly relies on @keyframes and animation to achieve.

Browser support for @keyframes and animation

@ keyframes rules

The @keyFrames rule is to create an animation.

The @keyframes rule specifies a CSS style and the animation will gradually change from the current style to the new style.

@keyframes myfirst
{
    from {background: red; }to {background: yellow;}
}
Copy the code

The above is a simple animation. The keywords “from” and “to” are equal to 0% and 100%. 0% is the beginning of the animation, 100% is the completion of the animation. That’s going from red to yellow.

For best browser support, 0% and 100% selectors are the best choices.

animation

Now that we have the keyframe for the animation, we need to implement and bind the keyframe to a DOM.

grammar

You can write attributes together or separately.

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Copy the code

animation-name

Specifies the name of the keyframe to bind to the selector

grammar

animation-name: keyframename|none; // keyframename specifies the name of the keyframe to bind to the selectorCopy the code

animation-duration

The animation specifies how many seconds or milliseconds it takes to complete

grammar

animation-duration: time;
// timeSpecifies how long it takes for the animation to finish playing.Copy the code

animation-timing-function

Specify how the animation will complete a cycle

grammar

animation-timing-function: value;
Copy the code

Animation function

  • Linear animation has the same speed from beginning to end.

  • Help ease the default. The animation starts at a low speed, then speeds up and slows down before ending.

  • Ease-in animation starts at a low speed

  • Ease-out animation ends at a low speed.

  • Ease-in-out animations start and end at low speeds.

  • Steps (int, start | end) specifies the number of intervals in time function (step).

    There are two arguments. The first argument specifies the number of intervals between functions, which is a positive integer (greater than 0).

    The second parameter is optional and indicates whether the animation is continuous from the beginning or end of the time period.

  • Cubic – Bezier (n,n,n,n) Bezier curve

    For a Bessel curve of a website, you will thank 🙏 my ha! address

animation-delay

Defines when the animation starts, in seconds (s) or milliseconds (ms).

grammar

animation-delay: time;
// timeDefines the time, in seconds or milliseconds, to wait before the animation beginsCopy the code

animation-iteration-count

Defines how many times the animation should play.

grammar

animation-iteration-count: value; // Infinite specifies that the animation should play an infinite number of times (forever)Copy the code

animation-direction

Whether to loop alternately and play the animation backwards.

This is a highly playable property.

grammar

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
Copy the code

Argument parsing

  • Normal Default value. Press the animation to play normally.
  • Reverse The animation is played in reverse.
  • Alternate animation in odd numbers (1, 3, 5…) Forward, in even number of times (2, 4, 6…) Play in reverse.
  • Alternate -reverse animation at odd times (1, 3, 5…) Play backwards, in even numbers (2, 4, 6…) Forward play.
  • The inherited property of initial
  • Inherit Indicates the inherited property

animation-fill-mode

Property specifies the style to be applied to the element when the animation does not play (when the animation is complete, or when the animation has a delay before playing begins).

Use this property if you need to take into account the state of the animation, such as leaving the animation unchanged.

grammar

animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Copy the code

Argument parsing

  • None The default value. The animation does not apply any styles to the target element before or after the animation executes.
  • Forwards at the end of the animation (determined by animation-rotund-count), this property value will be applied to the animation.
  • Backwards animations will apply property values defined in keyframes that start the first iteration of the animation during the animation-delay definition.
  • Both animation follows the rules of forwards and backwards.
  • The inherited property of initial
  • Inherit Indicates the inherited property

animation–play-state

Specifies whether the animation is running or paused.

grammar

animation-play-state: paused|running; // paused specifies the paused animation // running specifies the running animationCopy the code

case

Color change

The color of div changes from red to yellow

code

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8"> 
<title>Animation test</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 6s;
}

@keyframes myfirst
{
	from {background:red; }to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Copy the code

The effect

Clockwise movement

Move the div clockwise

code

<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8"> 
<title>Animation test</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
  	position:relative;
	animation:myfirst 5s linear 2s;
}

@keyframes myfirst
{
	0%   {background:red; left:0px; top:0px; }25%  {background:yellow; left:200px; top:0px; }50%  {background:blue; left:200px; top:200px; }75%  {background:green; left:0px; top:200px; }100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Copy the code

The effect

conclusion

In fact, I also see these basic animations, in fact, it is not complicated to achieve, those complex animations are also built through such basic animations. But is there a question of how to remember the use of such attributes?

This question is the same as asking how you can’t remember the shortcut keys of PS because you haven’t used them very often. After drawing hundreds of complex animations, I believe you will have a better understanding of this animation!

Look forward to the animation case of the following pattern! It’s only just begun!

Thank you

Universal network

As well as hard-working self, personal blog, GitHub test, GitHub

Public number – return child mo, small procedure – small return blog

If you feel helpful to you, might as well give me a thumbs up 👍, continue to pay attention to ha!