Transitions in CSS 3
Transitions can go from a display to another for the same element, from a content to another, gradually.
On olders browsers that passes directly from the initial state to the final state without transition. This therefore does not negate the functionality given to the item unless the transition itself is part of the demonstration.
The list of items which can get a progressive display is given in the specification.
Demonstration
Move the mouse over the image below and click to load the full-size picture.
Property syntax
- transition
-
Compact form, see below.
- transition-property
-
Tells you which property has a transition. All is the default, all properties are concerned.
For example to change color over time: -
transition-property:color;
- transition-duration
-
Defines the total time of the transition. Default value is 0, there is no transition.
For example, to one-half second: -
transition-duration:0.5s
- transition-timing-function
-
Defines the shape of the progression over time, with accelerations possible during the transition.
This is represented by a bezier curve with four pairs of points whose starting pair (0.0) and the pair of arrival (1.1) are implicit.
Only two coordinates pairs are given for two intermediate points that guide the shape of the curve.List of possible values:
-
cubic-bezier(x1, y1, x2, y2): values are real numbers from 0 to 1.
ease: By default, corresponds to cubic-bezier (0.25, 0.1, 0.25, 1.0). This gives slow start and finish.
linear: A linear function that can be expressed also by cubic-bezier (0.0, 0.0, 1.0, 1.0).
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0). Start slow.
ease-out: cubic-bezier(0, 0, 0.58, 1.0). Finish slow.
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0). Start and finish slow. - transition-delay
-
Indicates when the transition starts (compared to the event that triggers it).
For example for a reaction time of one second: -
transition-delay: 1s;
By default the delay is 0.
Compact form
The four properties can be reduced to one. Are placed in the order: transition-property, transition-duration, transition-timing-function, transition-delay. No commas to separate values, as usual.
transition: all 2s ease 0;Last values may be omitted.
Using lists
You can have a list of property groups separated by a comma:
transition: color 0.2s ease 1s, top 2s ease-in 0;The basic properties like the compact form may contain lists separated by a comma:
transition-property:color,top;
transition-duraction:1s, 5s;The list items are associated by their position in the list. A duration of one second is attributed to the color property, a duration of 5 seconds to the top property.
Code of the demonstration
HTML code:
<div class="demo">
<a href="#"><img src="images/thumb-newyork.jpg" ></a>
<a href="https://www.xul.fr/images/island.jpg"><img src="images/thumb-island.jpg"></a>
</div>CSS code:
.demo
{
margin-bottom:20px;
position:relative;
width:300px;
height:215px;
overflow:hidden;
}
.demo img
{
float: left;
margin:0;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
border:none;
}
.demo a:hover img
{
margin-top:-215px;
}Explanation :
<a> tags are required to use hover in older browsers (even if there is no transition, it permits to change the image).
OnMouseOver and onMouseOut events do not work together in this case (I tried to use them).
Both images are displayed in the second layer but the second is hidden by the property overflow:hidden. When the mouse passes over the layer, the top is offset by the height of the first image that shows the second. It works with all browsers, but the transition effect applies only to the most recent.
References