Second, the transition transition
CSS3, we can add an effect to change from one style to another time, without the use of Flash animation or JavaScript, namely: transition;
transition attributes: transition: four property values; need to add prefix: -webkit-, -ms- or -moz- support;
transition-propertythe name of the transitional provisions apply CSS properties.
transition-durationThe time it takes to define the transition effect. The default is 0.
transition-timing-functionTransition effect a predetermined time curve. The default is "ease".
transition-delayWhen to start specified transition effects (delay time). The default is 0.
Property Value Analysis:
transition-property ：
none / all / property
none no transition effect to
all transition effects are all the
property to the name of the transition effect
transition-duration：
time value; it takes time transition effects
transition-timing-function ：
linear uniform transition
ease to a slow start and then faster, then slower end of
ease-in to a slow start
ease-out at the end of a slow
ease-in-out to a slow start and the end of the transition
Shorthand:
transition: all / css attribute name exercise time s / ms delay time s / ms animation type
Notes: CSS3 transition is an element gradually change from one style to another effect. To achieve this, two things must be defined:
1. The provisions of the add effects to which CSS properties
2. The effect of the provisions of the length of
Internet Explorer 10, Firefox, Chrome and Opera support the transition property.
Safari requires the prefix -webkit-.
Internet Explorer 9 and earlier versions do not support the transition property. Chrome 25 and earlier, you need to prefix -webkit-.
When the mouse cursor to the elements, it gradually changes its original style
Case :( width of the transition width gradually increases from a small stroke when the mouse)
div{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s;
}
div:hover{
width:300px;
}
<div></div>
Multi-attribute transition
div{
width: 300px;
height: 300px;
background: #fdff1f;
border: #ffae28 solid 3px;
margin: 100px auto;
transition: all 0.5s;
}
div:hover{
width: 500px;
height: 400px;
border-radius: 15px;
background: #ff67c2;
}
<div></div>
