Hi, everyone! I’m Transition. Some people confuse me with the animation next door. I’m going to introduce myself to you so you can understand what I do.

Take a look at my attributes:

People always call me Transition, but THERE are four important parts of me. Listen to me.

  1. transition-property: Attributes that need to participate in transitions, such as width, height, background…
  2. transition-duration: Duration of transition animation in seconds s or ms
  3. transition-delay: Delay transition time, in seconds s or milliseconds ms
  4. transition-timing-function: Animation Transition animation type

I can be defined as a property

div{
  width:100px;
  height:100px;
  background:blue;
  transition-property: width;/* Attributes that need to participate in the transition */
  transition-duration: 1s;/* The duration of the transition animation */
  transition-delay: 1s;/* Delay the transition time, in seconds or milliseconds ms */
  transition-timing-function: ease-out;/* Animation transition animation type */
}
div:hover{
  width:300px; 
}
Copy the code

rendering

It’s working. Am I good? But ABOVE I due to too many properties a little bit do not welcome new students o(╥﹏╥) O

In fact, my normal self appears in code as follows:

So thin I am not very cute? (╹ del ╹)

If I write it this way, the effect is the same

div{
  width:100px;
  height:100px;
  background:blue;
  transition:width 1s 1s ease-out ;
}

div:hover{
  width:300px;
}
Copy the code

I could be better! ୧ (๑ • ̀ ◡ • ́ ๑) ૭

Normally, I would animate some elements as they change, but I have to work with my good partner Hover, so let’s start with some code:

div{
    width:100px;
    height:500px;
    background:teal;
    /* I can animate multiple attributes one by one
    transition:width .5s linear,height .5s ease .5s,background 1s ease-in 1s;
}
/* Hover over div */
div:hover{
    width:500px;
    height:100px;
    background:hotpink;
}
Copy the code

So does that make sense to you? Give it a try?

Here is the effect of applying the transition animation. Multiple properties are animated in sequence. In fact, the transition delay property is cleverly applied, so that the last property is finished and the next one is followed.

Look at my trick transition-timing-function

Transition-timing-function is an animated curve with six values.

  • ease– Specifies a transition effect that starts slowly, then fast, then ends slowly (this is the default)
  • linear– Specifies the same speed conversion effect from start to finish
  • ease-in– Specifies the slow start transition effect
  • ease-out– Specifies a transition effect that ends slowly
  • ease-in-out– Specifies the start and end of slow transition effects
  • cubic-bezier(n,n,n,n)– Define your own values in a cubic Bessel 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; }Copy the code

Look what I can do! ヾ(◍°∇°◍) Blue ゙ a little more complex example

Now let’s create a better effect, similar to the effect of playing the piano, the code is as follows:

html:

<ul>
    <li><a href="">Home page</a><span></span></li>
    <li><a href="">Home page</a><span></span></li>
    <li><a href="">Home page</a><span></span></li>
    <li><a href="">Home page</a><span></span></li>
</ul>
Copy the code

css

<style>
    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;
        /* Raise the level and resolve to be covered by span */
        position: relative;
        z-index: 1;
    }

    span {
        position: absolute;
        bottom: 0;
        width: 150px;
        height: 4px;
        background: pink;
        / * * /
        transition: height .5s linear;
    }

    li:hover span {
        height: 60px;
    }
</style>
Copy the code

Please look at the effect picture:

This is a good result, using transition animation combined with a comprehensive application related to positioning. Finally remind again, you want to use me to do transition animation, must be combined with event trigger oh, the most commonly used way is the mouse hover.

conclusion

Today, I introduced transition animation to you. I believe you all know what I do. Next time, I will introduce animation next to me.

More recommended

  • How to send love words to wife everyday with JS
  • The second spring of AJAX! The fetch!!!!!!
  • Teach you js to generate two-dimensional code -QrCodeJS
  • Background management system permissions and the idea of VUE processing permissions