CSS3 transition properties

This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

🙉🙉🙉🙉 Learning CSS3 advanced these two knowledge points must be mastered. In this article we will look at transitions and simple use.

Transition the transition

Transitions, as the name suggests, are transitions from one style to another, which are transitions of states, such as hover, click, and so on.

Transitions can automatically add “tween animation” for an element to change between styles

We define the transition state of an element using the attribute transition.

Transition is a combination of four properties. Only transition-duration is mandatory

  • Transition-property: specifies the name of the CSS property for which the transition effect can be set. The default value is all.

  • Transition-duration: specifies how many seconds or milliseconds it takes to complete the transition effect. The default is 0.

  • Transition-timing-function: specifies the time curve of the transition effect. The default is “ease”.

    • Cubic – Bezier (n, n, n, n) : Define its own value in the cubic- Bezier function. Possible values are between 0 and 1.
    • Ease: Slow in the front, fast in the middle, and slow in the back
    • Linear: Motion at a constant speed
    • Ease-in: Start slowly
    • Ease-out: ends in a slow speed
    • Ease-in-out: a transition effect with a slow start and finish

  • Transition-delay: specifies when the transition effect starts. The default is 0.

Example 1: Scratch-off simple version

Let’s make a quick scratch-off.

Effect:

So how does that work? The background image is covered by the background image by cutting a div into 100 pieces and giving it a background color. Then hover over the sub-div with the mouse, set transition-duration to 0s, and remove the background color instantly. Transition-duration set to 99999s when the div bounces, the mask layer will not be restored for a short time.

Code:

<body>
    <div class="main">
        div*100
    </div>
</body>
<style>
    .main {
        width: 500px;
        height: 500px;
        /* border: 2px solid red; * /
        margin: 240px auto;
        display: grid;
        grid-template-columns: repeat(10.10%);
        grid-template-rows: repeat(10.10%);
        background: url('./zhuyin.png');
    }
    .main>div{
        background: oldlace;
        transition: 9999s;
    }
    .main>div:hover{
        background: none;
        transition: 0s;
    }
</style>
Copy the code

Example 2. Mutable model

Give a div a transition, click and hover different effects, and you have two shapes.

Code:

<body>
    <div class="main">
        <div class="content"></div>
    </div>
</body>
<style>
    .main {
        width: 500px;
        height: 500px;
        border: 2px solid black;
        margin: 240px auto;
        transition: 3s;
    }
    .content{
        width: 100px;
        height: 100px;
        margin: 50px 10px 0 300px;
        background: red;
        transition: 3s;
    }
    .content:hover {
        background: #FFF4C7;
        border-radius: 50%;
    }
    .content:active {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: none;
        box-shadow: 15px 15px yellow;
    }
    .main:active{
        background: #1A1C1D;
    }
</style>
Copy the code

Write in the last

I did not use any other properties in the above examples. If you specify the name of the property of the transform, then after the hover operation, only that property will have the transition effect. The other properties are a transition effect, and there is no tween animation in the middle, which is very abrupt. The default is all, which means that all attributes have transition effects.

💌 Qualitative change is the inevitable result of quantitative change, and quantitative change is the necessary preparation for qualitative change

😇 Today’s scenery