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

Source: Internet
Author: User

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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.