A detailed description of the transition attribute in CSS3

Source: Internet
Author: User

First, the grammar

Transition:property Duration timing-function Delay

The Transition property is a composite property, and she includes the following sub-properties:

    • Transition-property: Specifies the name of the CSS property that sets the transition effect
    • Transition-duration: Specifies how many seconds or milliseconds to complete the transition effect
    • Transition-timing-function: Specify the transition function, which specifies the velocity curve of the speed effect
    • Transition-delay: Specify the delay time to start appearing

The default values are: all 0 ease 0

Note: The Transition-duration duration is 0 and does not produce transitions

When changing the transition effect of multiple CSS properties:

a{ Transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}

Second, sub-attributes

    • Transition-property

Transition-property:none |all |property;

When none is true, no property has a transition effect, and all properties have a transition effect when the value is all, and the value applies a transition effect to the specified CSS property, with multiple attributes separated by commas

    • Transition-duration


This property is primarily used to set the time it takes for a property to transition to another property, that is, the length of time it takes to transition from the old property to the new property, commonly known as duration

    • Transition-timing-function

transition-timing-function:linear| ease| ease-in| Ease-out| Ease-in-out| Cubic-bezier (N,n,n,n);

This property refers to the "easing function" of the transition. It is used primarily to specify the transition speed of the browser and the progress of the operation during the transition, as explained below:

Note: The value cubic-bezier (n,n,n,n) can define its own values, such as Cubic-bezier (0.42,0,0.58,1)

Div{width:100px;Height:100px;Background-color:Orange;margin:20px Auto;Border-radius:100%;-webkit-transition-property:-webkit-border-radius;Transition-property:Border-radius;-webkit-transition-duration:3s;transition-duration:3s;-webkit-transition-timing-function:ease; transition-timing-function:ease; Div .:Hover {border-radius:0px;}

I try to change different values to see the difference, but it is not obvious that the duration of the long point estimate more can be seen, but because the GIF is too big to get up, so it took 3 seconds of time.

Ease: From fast to slow to slower

Linear: Constant speed

Ease-in: Getting Faster

Ease-out: More and more slowly

Ease-in-out: Accelerate and slow down first

    • Transition-delay

This property has nothing to say, that is, the delay time before the transition effect starts, in seconds or milliseconds

One more chestnut:

Div{width:200px;Height:200px;background:Red;margin:20px Auto;-webkit-transition-property:background;Transition-property:background;-webkit-transition-duration:. 5s;transition-duration:. 5s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-delay:. 18s;Transition-delay:. 18s;}Div:hover{background:#000;}

A detailed description of the transition attribute in CSS3

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.