Questions about CSS3 Transition: Where should transition be put?

Source: Internet
Author: User

CSS's transition allows the CSS's property values to transition smoothly over a specified period of time. This effect can be triggered by clicking on the mouse, getting focus, being clicked, or any changes to the element, and smoothing the CSS's property values by animating the effect gradually.

Generally we use hover to change CSS values

In writing, it is possible for beginners to be puzzled, not clear whether transition is written in the ordinary state of the elements, or written in the hover state of the elements, in order to clear and intuitive description, here to give a chestnut, write only the key parts

Html:

<class= "Demo1">Transition placed in the normal state </Div > <  class= "Demo2">Transition placed in hover status </Div >

Css:

Div{width:100px;Height:100px;background:#333;Color:#fff;margin:20px}. Demo1{-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-ms-transition:All 1s ease;-o-transition:All 1s ease;transition:All 1s ease;}. Demo1:hover{background:#ccc;Color:#333;width:200px;}. Demo2{    }. Demo2:hover{background:#ccc;Color:#333;width:200px;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-ms-transition:All 1s ease;-o-transition:All 1s ease;transition:All 1s ease;}

The demo can be seen, in fact, the transition state is divided into two parts, forward and reverse, that is, MouseEnter and mouseleave generated by the dynamic effect; When transition is placed in the hover state of the element, it will only produce a forward over-animation

Questions about CSS3 Transition: Where should transition be put?

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.