Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "css3 how to achieve element transition effect", the content is detailed, the steps are clear, the details are handled properly, I hope this "css3 how to achieve element transition effect" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

In css3, you can use the transition attribute to achieve the element transition effect, which sets the attribute name, transition time, transition speed, and when the transition begins, with the syntax "element {transition: attribute name time-speed curve delay}".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How to realize the element transition effect by css3

The transition property is an abbreviated property that sets four transition properties:

Transition-property specifies the name of the CSS property that sets the transition effect.

Transition-duration specifies how many seconds or milliseconds it takes to complete the transition.

Transition-timing-function specifies the speed curve of the speed effect.

Transition-delay defines when the transition effect begins.

The syntax is:

Transition: property duration timing-function delay

Examples are as follows:

Div {width:100px;height:100px;background:pink;transition:width 2s; / * Firefox 4 * /-webkit-transition:width 2s; / * Safari and Chrome * /-o-transition:width 2s; / * Opera * /} div:hover {width:300px;}

Please move the mouse pointer over the blue div element to see the transition effect.

Note: this example is not valid in Internet Explorer.

Output result:

Read this, the "css3 how to achieve element transition effect" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.