Transform is an attribute, essentially the same as width,height, plus transform, which adds a transform attribute to the class.
Transition is a property, it is used to control the transition effect, because with transform can increase the transformation effect, and that transformation is instantaneous mutation, if want to let this change is smooth, transition type, then use transition to control, Set the properties to be controlled and the time of the transition.
Animation is an animation effect, you need to define an animation process with @keyframes, and then in the class with the various parameters animation to add the animation name, run time, 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 NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Introduction and usage examples of transform,transition and animation in CSS3
