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

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

Blog description

Part of the information involved in the article comes from the Internet, and of course, there are my own personal summaries and opinions. The purpose of sharing is to build a community and consolidate myself. If the quoted material is infringing, please contact me to delete it! Fortunately I am here, thank you for coming!

instruction

CSS3 can realize the animation effect of HTML elements without using JavaScript or Flash.

In order to learn the dynamic effects of the front-end, I simply did not compromise. At the moment, I'm grabbing CSS animations to make a wave.

What is animation

⭕The old rules, the beginning of the question.

Specify some key frames at the time node that needs to be changed, and the key frame is the style defined at the moment. For example, I move 5m to the left in 1s and 15m to the left in 3s. At this time, there are two key frames. Because of these two key frames, the screen is shifted and the animation is also generated.

The following sentence is summarized in place: Animation makes elements gradually change from one style to another.

The animation of CSS3 mainly relies on @keyframes and animation to realize.

Browser support for @keyframes and animation

@keyframes rules

The @keyframes rule is to create animations.

A CSS style and animation specified in the @keyframes rule will gradually change from the current style to the new style.

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

The above is a simple animation. The keywords "from" and "to" are equivalent to 0% and 100%. 0% is the beginning of the animation, and 100% is the completion of the animation. That is, from red to yellow.

In order to get the best browser support, using 0% and 100% selectors is the best choice.

animation

Animation Now that the key frames of the animation are all there, then this key frame needs to be implemented and bound to a certain DOM.

grammar

It can be written together or the attributes can be written separately.

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

animation-name

Specify the name of the keyframe to be bound to the selector

Syntax

animation-name: keyframename|none;
// keyframename 指定要绑定到选择器的关键帧的名称

animation-duration

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

Grammar

animation-duration: time;
// time 指定动画播放完成花费的时间。

animation-timing-function

Specify how the animation will complete a cycle

Syntax

animation-timing-function: value;

Animation function

• The speed of linear animation is the same from beginning to end.
• ease is the default. The animation starts at a low speed, then speeds up, and slows down before ending.
• ease-in animation starts at low speed
• The ease-out animation ends at a low speed.
• The ease-in-out animation starts and ends at a low speed.

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

  There are two parameters, the first parameter specifies the interval number of the function, this parameter is a positive integer (greater than 0).

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

• cubic-bezier( n , n , n , n ) Bezier curve

  Give a website of Bezier curve, you will thank 🙏 my ha! address

animation-delay

Define when the animation starts, the unit can be seconds (s) or milliseconds (ms)

Syntax

animation-delay: time;
// time 定义动画开始前等待的时间，以秒或毫秒计

animation-iteration-count

Define how many times the animation should be played.

Syntax

animation-iteration-count: value;
//  n 定义应该播放多少次动画
//     infinite 指定动画应该播放无限次（永远）

animation-direction

Whether to play the animation in reverse loop alternately.

This is an attribute with high playability.

Syntax

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

parameter analysis

• normal The default value. The animation is played as normal.
• reverse The animation is played in reverse.
• Alternate animation is played forward at odd times (1, 3, 5...) and reverse at even times (2, 4, 6...).
• Alternate-reverse animation is played in the reverse direction at odd times (1, 3, 5...) and forward at even times (2, 4, 6...).
• initial inherited properties
• inherit inherited properties

animation-fill-mode

The property specifies the style to be applied to the element when the animation is not playing (when the animation is completed, or when the animation has a delay before it starts playing).

If you need to consider the state of the animation, you can use this property, such as retaining the effect of the animation change.

Syntax

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

parameter analysis

• none The default value. The animation will not apply any styles to the target element before and after the animation is executed.
• forwards After the animation ends (determined by animation-iteration-count), the animation will apply this attribute value.
• The backwards animation will apply the property values defined in the key frame of the first iteration of the animation-delay that started the animation during the definition of animation-delay.
• Both animations follow the rules of forwards and backwards.
• initial inherited properties
• inherit inherited properties

animation--play-state

Specifies whether the animation is running or paused.

Syntax

animation-play-state: paused|running;
// paused 指定暂停动画
// running 指定正在运行的动画

Case study

Color change

The color of the div changes from red to yellow

code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>动画测试</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>

effect

Clockwise

Move the div clockwise

code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>动画测试</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>

Effect

Summarize

In fact, I have also seen that these basic animations are not complicated to implement. Those complex animations are also constructed through such basic animations. But is there a question, how do you remember the use of such attributes?

This question is the same as asking how to remember the shortcut key of PS, because it is not used frequently, how can I remember it? After drawing hundreds of complex animations, I believe you will have a better understanding of this animation!

Look forward to the follow-up animation case! Everything has just begun!

grateful

Almighty network

And the hardworking self, personal blog , GitHub test , GitHub

Public Account-Guizimo, Mini Program-Xiaogui Blog

If you feel helpful to you, please give me a thumbs up 👍, keep paying attention!