How to add multiple transformation effects to css3 animation (code example)

This article brings you how to add multiple transformation effects (code examples) to CSS3 animations. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In the previous article [ Simple use of transform attribute and transition attribute of css3 animation], the method of adding a transformation effect to achieve a simple animation transformation was introduced, but there is only one transformation effect. The animation is too monotonous, how to add multiple transformation effects? Below we will introduce to you how to add multiple transformation effects.

First, let’s take a look at what multiple transformations of a element look like?

The box on the left starts with small, green square corners, while the box on the right is larger with a red border and rounded corners. Hovering over either box triggers an animation that makes box 1 take on the appearance of box 2, and vice versa.

Again, we're still only using HTML and CSS to achieve this. Without CSS transforms, the two boxes will still change their border color and possibly border radius, but it will happen instantly, rather than a one-second animation.

So how is this effect achieved?

It's really simple, to apply multiple transformations to a single element, just list them one after the other using spaces. Example:

html code:

<div id="submenu"></div>

css code:

#submenu {
  	width: 100px;
    height: 60px;
    margin: 100px auto;
    background-color: #eee;
    border: 2px solid green;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
#submenu:hover {
    background-color: #fc3;
    -webkit-transform: rotate(360deg) scale(2);
    -moz-transform: rotate(360deg) scale(2);
    -o-transform: rotate(360deg) scale(2);
    -ms-transform: rotate(360deg) scale(2);
    transform: rotate(360deg) scale(2);
}

Please note that IE10 does not use the transformation prefix now, but transformation still requires -ms-.

This means that when you hover over the box, it will change color, rotate and scale within one second like this:

Description:

The transform attribute controls the rotation, scaling, movement, and tilt of the element;

The transition attribute realizes the transition effect of the element, allowing the element to From one state to another, it is really moving;

Considering compatibility, you need to use the prefixes: -webkit-, -moz-, -o-, -ms-.

Summary: The above is all the content introduced in this article. You can try it yourself and put multiple transforms together to see the effect and deepen your understanding. I hope it will be helpful to everyone’s learning. I recommend related videos: css3 tutorial!

The above is the detailed content of How to add multiple transformation effects to css3 animation (code example). For more information, please follow other related articles on the PHP Chinese website!