Introduction and usage examples of transform, transition and animation in CSS3_html/css_WEB-ITnose

Transform is an attribute, which is essentially the same as width and height. Adding transform means adding a transformation attribute to the class.

Transition is an attribute, which is used to control the transition effect, because using transform can increase the transformation effect, and that transformation is an instant mutation. If you want this change to be For smooth and transitional types, you need to use transition to control it, and just set the attributes to be controlled and the transition time.

Animation is an animation effect. You must first define an animation process with @keyframes, and then use the various parameters of animation in the class to specify the name and running time of the animation you want to add. number of runs and so on.

/* Float using transition */

.float {

transition-property: transform;

transition -duration: .3s;

}

.float:hover {

transform: translateY(-5px);

}

/* Pulse using animation*/

@keyframes pulse {

25% {

transform: scale(1.1);

}

75% {

transform: scale(.9);

} }

}

.pulse { }

.pulse:hover {

animation-name: pulse;

animation-duration: 1s;

animation-timing-function: linear;

animation-iteration-count: infinite;

}

Copyright statement: This article is an original article by the blogger , may not be reproduced without the permission of the blogger.