Introduction and usage examples of transform, transition and animation in CSS3, css3transform

Introduction and usage examples of transform, transition and animation in CSS3, css3transform
Transform is an attribute, which is essentially the same as width and height. In addition, transform adds a transform attribute for the class.
Transition is an attribute used to control the transition effect, because transform can increase the transformation effect, and the transformation is an instantaneous mutation. If you want this change to be smooth and transitional, you must use transition to control the attributes and transition time.
Animation is an animation effect. You must first define an animation process with @ keyframes, and then use the parameters of animation in the class to specify the name, running time, and running times of the animation you want to add.
/* Float using transition */. float {transition-property: transform; transition-duration:. 3 s ;}. 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: 1 s; animation-timing-function: linear; animation-iteration-count: infinite ;}

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.