Home > Developer > Web Develop
"Transition-duration"
is a CSS3 property that specifies the amount of time (in seconds or milliseconds) to complete an over-effect.
Syntax: Transition-duration:time;
Time: Specifies how long it takes (in seconds or milliseconds) to complete the transition effect. The default value is 0, which means there is no effect.
This property is actually a sub-property of the Transition property, and the following summarizes the transition property in CSS3:
"Transition"
used to smooth over a certain amount of time, this effect can be clicked on the mouse, get focus, be clicked or triggered on any changes to the element, and sleek toThe animation effect changes the property value of the CSS property.
you can tell from the definition that transition is an overly animated property, whereas the Transiton property is simply a shorthand property for setting four over-attributes, which
The four excess attributes are:
Transition-property (properties for performing transformations)
Transition-duration (Transform continuation time)
transition-timing-function (changes in the change rate during the continuation time)
Transition-delay (Transform delay time)
Here are the individual properties
Transition-property is used to specify that when one of the attributes of an element changes, the transition effect is performed
value: None (no property changes), all (all properties are changed), or specify an element (such as Color,background properties).
Transition-duration is the time the animation is executed, and units (s) such as "0.1s" can also be written as ". 1s", which can act on any element, including before and after Pseudoelement.
transition-timing-function How animations are executed
values: ease (gradually slowing down), linear (constant speed), ease-in (from slow to fast), ease-out (from fast to slow), ease-in-out (slow first to fast to slow), cubic-Bézier (this value allows you to customize a time curve).
Transition-delay Animation delay time basic usage is the same as duration.
Syntax:
transition: <transition> [, <transition>]*
<transition> = <transition-property> <transition-duration> <transition-timing-function > <transition-delay>
This is a simpler way of writing, and we can also write multiple transition effects at the same time, each of which is written in the order of the fixed attributes.
Example:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><style>. FK{position:Absolute; Left:0;background:#00F;width:50px;Height:50px;}. Fk:hover{position:Absolute; Left:500px;background:#F00;}. Fk,fk:hover{transition:background-color 3s ease,left 3s ease-in-out;}</style></Head><Body><Divclass= "FK"><Div></Body></HTML>
The effect moves from left to right with a block and changes color
"Opacity Properties"
is also a CSS3 property that is used to set the opacity level of an element, which is supported by all browsers.
Syntax: Opacity:value|inherit;
Parameter description:
Value: Specifies the opacity. From 0.0 (fully transparent) to 1.0 (completely opaque).
Inherit: The value of the Opacity property should be inherited from the parent element.
For example, set the transparency of an image:
Img{opacity:0.4;filter:alpha (opacity=40);/* for IE8 and earlier versions */}img:hover{opacity:1.0;filter:alpha (opacity=100);/* for IE8 and earlier versions of */}IE9, Firefox, Chrome, Opera, and Safari use attribute opacity to set the transparency. The Opacity property can set the value from 0.0 to 1.0. Lower value
, the more transparent.
IE8 and earlier versions use the filter Filter:alpha (opacity=x). X can take a value from 0 to 100. The smaller the value, the more transparent.
Css3--transition Properties and Opacity properties
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
