Join the DZone community and get the full member experience.
Join For Free
Access over 20 APIs and mobile SDKs, up to 250k transactions free with no credit card required
- "Transition" refers to a change of the state of an object.
- In CSS3 we can show the transition of an object using a transition property. Variations of this property for different browsers are: transition,-moz-transition, -moz-transform ,-webkit-transition, -webkit-transform,-o-transition.
- The other transition properties have duration, property, delay and timing functions to control the CSS3 transition.
Testing CSS3 Transition:-
- The HTML CSS3 transition code css3Demo.html ,
<title>CSS3 Transition Demo</title>
border:4px solid red;
transition:border 2s, border-radius 2s, color 2s;
-moz-transition:border 2s, border-radius 2s;
-webkit-transition:border 2s, border-radius 2s;
-o-transition:border 2s, border-radius 2s;
border:4px solid yellow;
- It displays the square on "LOAD" of HTML page,
- On "HOVER" of that div element the transition occurs and becomes round with change in border radius,color and border style. The result will look like:
#1 for location developers in quality, price and choice, switch to HERE.
Published at DZone with permission
, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.