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

This article mainly explains "how to achieve transition animation in transition". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how to achieve transition animation in transition"!

Transition attribute:

Transition-property: attributes that need to participate in the transition, such as width, height, background...

Transition-duration: the duration of the transition animation, in seconds or milliseconds ms

Transition-delay: the time to delay the transition, in seconds or milliseconds ms

Transition-timing-function: animation type of animation transition

I can be defined as an attribute.

Div {

Width:100px

Height:100px

Background:blue

Transition-property: attributes that width;/* needs to participate in the transition * /

Transition-duration: 1sram * duration of transition animation * /

Transition-delay: 1s ms * delay transition time (in seconds or milliseconds)

Transition-timing-function: animation type of ease-out;/* animation transition * /

}

Div:hover {

Width:300px

}

Effect picture

The effect is coming out. Am I good? But I am a little unpopular with novice students because of my too many attributes above (╥ students ╥) o

In fact, I usually appear in the code in the following form:

Am I cute to lose weight like this? (╹▽╹)

If you write it like this, the effect is the same.

Div {

Width:100px

Height:100px

Background:blue

Transition:width 1s 1s ease-out

}

Div:hover {

Width:300px

}

I could be better! "(" ◡ ")"

Normally, I animate some elements when they change, but I have to work with my good partner hover (mouse over). Let's take a look at a piece of code:

Div {

Width:100px

Height:500px

Background:teal

/ * and I can display transition animation effects one by one with multiple attributes-- * /

Transition:width .5s linear,height .5s ease .5s, background 1s ease-in 1s

}

/ * hover over the mouse to change the style of div * /

Div:hover {

Width:500px

Height:100px

Background:hotpink

}

! [] (https://cache.yisu.com/upload/information/20220117/488/18101.jpg)

Do you understand this way of writing? Try it?

Here is the application of transition animation to achieve the effect, multiple attributes are in turn to perform the animation effect, in fact, the ingenious application of the transition delay attribute, so that the last attribute is finished and then followed by the next one, is not very interesting duck.

Look at my stunt, transition-timing-function.

Transition-timing-function is the curve of animated motion, which has a total of six values.

Ease-specify a transition effect that starts slowly, then quickly, and then ends slowly (this is the default)

Linear-specifies the conversion effect from start to end at the same speed

Ease-in-specifies the transition effect of slow start

Ease-out-specify a transition effect that ends slowly

Ease-in-out-specifies the transition effect of a slow start and end

Cubic-bezier-define your own values in a cubic Bezier function

# div1 {transition-timing-function: linear;}

# div2 {transition-timing-function: ease;}

# div3 {transition-timing-function: ease-in;}

# div4 {transition-timing-function: ease-out;}

# div5 {transition-timing-function: ease-in-out;}

See what I can do! "(◍ °∇ °◍)" is a more complex example.

Let's make a more beautiful effect, which is similar to playing the piano. The code is as follows:

Html:

Home page

Home page

Home page

Home page

Css

Ul {

List-style: none

Width: 600px

Height: 60px

Background: skyblue

}

Li {

Float: left

/ * reference * /

Position: relative

}

A {

Display: block

Width: 150px

Height: 60px

Line-height: 60px

Text-align: center

Color: # 333

Text-decoration: none

/ * upgrade the level to solve the problem of being obscured by span * /

Position: relative

Z-index: 1

}

Span {

Position: absolute

Bottom: 0

Width: 150px

Height: 4px

Background: pink

/ * transition * /

Transition: height .5s linear

}

Li:hover span {

Height: 60px

}

At this point, I believe you have a deeper understanding of "transition how to achieve transition animation", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.