Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to achieve animation in css". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to realize animation in css.

As the business needs more and more front-end, css, as one of the three magic weapons of front-end, becomes more and more complex. It brings some pressure to the beginners. Css is specific to each attribute is not too complex, the main problem is that there are many knowledge points. It is not easy to learn the main knowledge points, a look at the questions on the Internet, or a look at the css books written by the masters, are submerged in the new ocean.

In fact, the human brain is not good at memorizing scattered knowledge points, but if there is a logical line that can connect these knowledge, it can greatly facilitate the brain's memory and search. This clue should be logical and had better be interesting.

As it happens, the animation of css is such an interesting clue that you can understand the css attributes in the changes in the animation.

CSS Animation Rapid Literacy

Before concatenating other attributes, let's understand the animation.

The key word of animation is "move". We have to answer a few questions:

What: what moves?

Where: where do you move?

When: when do you move? For how long?

How: how does it move?

How much: how many times?

The result of these problems constitutes the constituent elements of an animation.

First of all, what is the main body of the motion? It's our HTML tags, or complex components made up of tags. For us, the main thing is

And. Second, where to move? This is the css property to change. This is also the knowledge point of css that we want to string together. Third, when do you move? We need to specify the length of the animation, the timing of the start, and so on. This is the technical attribute of pure animation. Fourth, how to move? Whether to move at a uniform speed, or to accelerate, or to accelerate and then decelerate, or to make a Bezier curve and so on, this is also the technical attribute of animation. Fifth, how many times do you move? Is it one time, or many times, or keep moving? This is also the technical attribute of pure animation.

Transition animation

Let's first learn a simple css attribute animation called transition. It is made up of the above four attributes:

Transition-property: specifies the value of the css attribute to change

Transition-duration: animation duration

Transition-timing-function: the speed of animation changes

Transition-delay: the delay time for the start of the animation

Let's look at an example:

# hellocss {transition-property: width; transition-duration: 5s; transition-timing-function: linear; transition-delay: 1s;}

What this animation specifies means that if the width width changes, the animation with the width change of 5 seconds will be delayed by one second. The speed of change is uniform.

To see clearly, we set up an initial width, plus a background color and a foreground color:

# hellocss {background-color: blue; color: yellow; width: 20px; transition-property: width; transition-duration: 5s; transition-timing-function: linear; transition-delay: 1s;}

Since it is animation, then there should be changes. So we wrote two sentences of javascript:

Function trans1 () {let hcss1 = document.getElementById ("hellocss"); hcss1.style.width = "100px";}

Then find an event to trigger the change, such as when the page loads:

Hello,HTML Hello,CSS function trans1 () {let hcss1 = document.getElementById ("hellocss"); hcss1.style.width = "100px";}

Once proficient, we can also simplify the four attributes into one:

Transition: width 5s linear 1s

If there is no delay, item 4 may not be written. If you use the slow-to-fast ease mode, the third item can also be omitted. If the first item changes everything, it can be written as all. But the length of the second animation has to be written. If you don't write, the default is 0 seconds, then there will be nothing.

All attributes that can be linearly calculated can be used for animation. In addition to the easy-to-understand coordinate attributes such as width, height and position, color attributes are also good scenes that are often used for animation.

# hellocss {background-color: blue; color: yellow; transition: all 10s linear 1s;} Hello,HTML Hello,CSS function trans1 () {let hcss1 = document.getElementById ("hellocss"); hcss1.style.animationPlayState = "paused";} understand css attribute deformation-rounded rectangle through animated image

Now we can finally see how the first animation was written at the beginning:

@ keyframes color_change {0% {background-color: blue; color: yellow; border-radius: 0px;} 50% {background-color: yellowgreen; color: red;} 100% {background-color: palegoldenrod; color: black; border-radius: 100px;}}

Planar movement: transform:translate attribut

The easiest way to pan is to use the transform:translate attribute.

We first move the discolored rounded rectangle down 100px, and then to the right 100px:

0% {background-color: blue; color: yellow; border-radius: 0px; transform:translate (0pxPower0px)} 50% {background-color: yellowgreen; color: red Transform:translate (0pxMagne 100px)} 100% {background-color: palegoldenrod; color: black; border-radius: 100px; transform:translate (100pxMagne 100px)}}

Rotation: transform:rotate attribut

Finally, let's look at the rotation attribute.

@ keyframes color_change {0% {background-color: blue; color: yellow; border-radius: 0px; transform:translate (0pxMagol 0px); transform:rotate (0deg);} 50% {background-color: yellowgreen; color: red Transform:translate (0pxMagne 100px); transform:rotate (90deg);} 100% {background-color: palegoldenrod; color: black; border-radius: 100px; transform:translate (100pxMagne 100px); transform:rotate (180deg) Learn the box model through animation

Let's go back to the basics and understand the box model through animation.

The so-called box, the most basic is width and height. There is nothing to say about this, let's experience it with a wide-height animation:

@ keyframes box_change {0% {height: 50px; width: 50px;} 50% {height: 200px; width: 50px;} 100% {height: 200px; width: 200px }} .box1 {background-color: blue; color: yellow; opacity: 0.65; animation-name: box_change; animation-duration: 10s; animation-delay: 1s; animation-timing-function: ease; animation-iteration-count: infinite; animation-direction: alternate } Hello Box

In addition to the width and height, the box has a frame, a padding inside the frame and a margin outside the frame.

Including the frame, it is divided into four directions: top, bottom, left and right:

Border-width: 5px; border-top-color: # f5222d; border-bottom-color: # cf1322; border-left-color: # a8071a; border-right-color: # 820014; padding: 10px; margin: 15px

We now add color and shape to the border and move it with margin and paddling

The code is as follows:

@ keyframes box_change {0% {height: 50px; width: 50px; border-style: solid;} 50% {height: 200px; width: 50px; border-style: dotted;} 100% {height: 200px; width: 200px; border-style: dashed }} .box1 {background-color: blue; color: yellow; border-width: 5px; border-top-color: # f5222d; border-bottom-color: # cf1322; border-left-color: # a8071a; border-right-color: # 820014; padding: 10px; margin: 15px; animation-name: box_change Animation-duration: 10s; animation-delay: 1s; animation-timing-function: ease; animation-iteration-count: infinite; animation-direction: alternate;} Hello Box

By opening chrome's developer tools, we can see more clearly the relationship between content, padding, border, and margin:

Thank you for reading, the above is the content of "how to achieve animation in css". After the study of this article, I believe you have a deeper understanding of how to achieve animation in css, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.