Implementation methods of common CSS3 animations

1. What is

CSS Animations is a proposed module for Cascading Style Sheets that allows Extensible Markup Language (XML) elements to be animated using CSS.

It refers to the process of elements gradually transitioning from one style to another.

There are many common animation effects, such as translation, rotation, scaling, etc. Complex animation is a combination of multiple simple animations.

There are several ways to implement animation with CSS:

• transition implements gradient animation
• transform animation
• animation implements custom animation
  

2. Implementation

transition implements gradient animation

The properties of transition are as follows:

• Property: Fill in the CSS property that needs to be changed
• Duration: The time unit required to complete the transition effect (s or ms)
• timing-function: The speed curve of the completed effect
• delay: delay trigger time of animation effect
  

The values ​​of timing-function are as follows:

Note: Not all properties can be used in transitions, such as display:none<->display:block

For example, to achieve the animation effect of changing when the mouse moves

<style>
       .base {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width, height, background-color, border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
        }

        /*Abbreviation*/
        /*transition: all 2s ease-in 500ms;*/
        .base:hover {
            width: 200px;
            height: 200px;
            background-color: #5daf34;
            border-width: 10px;
            border-color: #3a8ee6;
        }
</style>
<div ></div>

transform animation

Contains four commonly used functions:

• translate: displacement
• scale: zoom
• rotate: rotate
• skew: tilt
  

Generally used with transition overuse

Note that transform does not support inline elements, so convert it to block before using it.

For example

<style>
    .base {
        width: 100px;
        height: 100px;
        display: inline-block;
        background-color: #0EA9FF;
        border-width: 5px;
        border-style: solid;
        border-color: #5daf34;
        transition-property: width, height, background-color, border-width;
        transition-duration: 2s;
        transition-timing-function: ease-in;
        transition-delay: 500ms;
    }
    .base2 {
        transform: none;
        transition-property: transform;
        transition-delay: 5ms;
    }

    .base2:hover {
        transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
    }
</style>
 <div ></div>

You can see that the box has been rotated, tilted, translated, and enlarged.

animation implements custom animation

Animation is an abbreviation of 8 properties, as follows:

CSS animation only needs to define some key frames, and the browser will calculate the rest of the frames based on the interpolation of the timing function.

Define keyframes via @keyframes

Therefore, if we want the element to rotate in a circle, we only need to define the start and end frames:

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

From means the first frame, and to means the last frame.

You can also use percentages to describe the life cycle

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

After defining the keyframe, you can use it directly:

animation: rotate 2s;

Conclusion

The above is the detailed content of the implementation methods of common CSS3 animations. For more information on the implementation of CSS3 animations, please pay attention to other related articles on 123WORDPRESS.COM!