CSS3 transitions allow you to animate the original value of a CSS property to a new value over time, controlling the rate at which property values change. Most properties change their values in 16 milliseconds, so the recommended default transition time is 200ms .
The change of properties occurs when a certain event occurs, which is described by the corresponding pseudo-class. The most commonly used pseudo-class is:hover . This pseudo-class does not work on mobile devices such as iPhone or Android. A universal solution that works in desktop and mobile browsers would be to handle events using JavaScript (for example, switching classes on click).
Transitions apply to all elements, as well as the :before and :after pseudo-elements. To set all the properties of a transition, the transition property is usually shorthand.
CSS3 transitions may not apply to all properties and their values. A detailed list can be found on the page.
Creating Smooth Changes in Element Properties
Browser Support
IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
safari: 6.1, 3.1 -webkit-
opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
1. Property name transition-property
Contains the name of the CSS properties to which the transition effect will be applied. A property value can contain either a single property or a comma-separated list of properties. When creating a transition, you can use both the start and end states of an element. The property is not inherited.
The created effects should be unobtrusive. Not all properties require smooth change over time, which is related to user experience. For example, when hovering over a link, we want to see an instant change in the color of the link, or the color and style of the underline. Therefore, transitions should be used for those properties that you really need to draw attention to.
Syntax
Div ( width: 100px; transition-property: width; ) div:hover ( width: 300px; )
2. Transition duration transition-duration
Specifies the amount of time during which the transition should take place. If different properties have different transition values, they are separated by commas. If the duration of the transition is not specified, then the animation will not occur when changing property values. The property is not inherited.
Syntax
Div ( transition-duration: .2s; )
3. transition-timing-function
The property specifies a time function that describes the speed at which an object transitions from one value to another. If you define more than one transition for an element, such as the element's background color and position, you can use a different function for each property. The property is not inherited.
| transition-timing-function | |
|---|---|
| Values: | |
| ease | The default function, the transition starts slowly, accelerates quickly and slows down at the end. Matches cubic-bezier(0.25,0.1,0.25,1) . |
| linear | The transition occurs uniformly throughout the entire time, without fluctuations in speed. Matches cubic-bezier(0,0,1,1) . |
| ease-in | The transition starts slowly and then gradually speeds up at the end. Matches cubic-bezier(0.42,0,1,1) . |
| ease-out | The transition starts quickly and slowly slows down at the end. Corresponds to cubic-bezier(0,0,0.58,1) . |
| ease-in-out | The transition starts slowly and ends slowly. Matches cubic-bezier(0.42,0,0.58,1) . |
| cubicbezier(x1, y1, x2, y2) | Allows you to manually set values from 0 to 1 for the acceleration curve. you can build any transition path. |
| initial | Sets the value of a property to its default value. |
| inherit | Inherits the property value from the parent element. |
Syntax
Div ( transition-timing-function: linear; )
For more realistic animations, use the cubic Bézier function:
Rice. 1. Custom cubic Bézier functions from easings.net | custom name | Function value |
|---|---|
| easeInSine | cubic-bezier(0.47, 0, 0.745, 0.715) |
| easeOutSine | cubicbezier(0.39, 0.575, 0.565, 1) |
| easeInOutSine | cubic-bezier(0.445, 0.05, 0.55, 0.95) |
| easeInQuad | cubic-bezier(0.55, 0.085, 0.68, 0.53) |
| easeOutQuad | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| easeInOutQuad | cubic-bezier(0.455, 0.03, 0.515, 0.955) |
| easeInCubic | cubic-bezier(0.55, 0.055, 0.675, 0.19) |
| easeOutCubic | cubic-bezier(0.215, 0.61, 0.355, 1) |
| easeInOutCubic | cubic-bezier(0.645, 0.045, 0.355, 1) |
| easeInQuart | cubic-bezier(0.895, 0.03, 0.685, 0.22) |
| easeOutQuart | cubic-bezier(0.165, 0.84, 0.44, 1) |
| easeInOutQuart | cubicbezier(0.77, 0, 0.175, 1) |
| easeInQuint | cubic-bezier(0.755, 0.05, 0.855, 0.06) |
| easeOutQuint | cubicbezier(0.23, 1, 0.32, 1) |
| easeInOutQuint | cubic-bezier(0.86, 0, 0.07, 1) |
| easeInExpo | cubic-bezier(0.95, 0.05, 0.795, 0.035) |
| easeOutExpo | cubic-bezier(0.19, 1, 0.22, 1) |
| easeInOutExpo | cubicbezier(1, 0, 0, 1) |
| easeInCirc | cubicbezier(0.6, 0.04, 0.98, 0.335) |
| easeOutCirc | cubic-bezier(0.075, 0.82, 0.165, 1) |
| easeInOutCirc | cubic-bezier(0.785, 0.135, 0.15, 0.86) |
| easeInBack | cubic-bezier(0.6, -0.28, 0.735, 0.045) |
| easeOutBack | cubic-bezier(0.175, 0.885, 0.32, 1.275) |
| easeInOutBack | cubic-bezier(0.68, -0.55, 0.265, 1.55) |
4. transition-delay
An optional property that allows you to make sure that the property change does not occur immediately, but with some delay. Not inherited.
Syntax
Div ( transition-delay: .5s; )
5. Transition summary
All properties responsible for the change appearance element, can be combined into a single transition property
transition: transition-property transition-duration transition-timing-function transition-delay;
If we use the default values, then the entry
Div(transition: 1s;)
will be equivalent
Div (transition: all 1s ease 0s;)
6. Smooth transition of several properties
You can specify several consecutive transitions for an element by listing them separated by commas. Each transition can be formalized with its own time function.
Div (transition: background 0.3s ease, color 0.2s linear;)
Div ( transition-property: height, width, background-color; transition-duration: 3s; transition-timing-function: ease-in, ease, linear; )
7. Examples of transitions for various properties
Hover your mouse over the blocks to see the properties in action.
CSS3 gives us new prettiness and amenities. In some cases, you no longer need to resort to using flash and javascript to create any unusual effect. The CSS transition property is a prime example of one such situation. I think everyone knows the :hover pseudo-class. With it, change css values properties of an element when hovering over it with the mouse. For example, there was a gray block with a black inscription, hovered over it with the mouse, and it turned black with a white inscription.
Here's how it's written:
Blok ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; ) .blok:hover ( background-color:# 000000; color:#ffffff; )
And here's what it looks like:
Point at me
You can also make the block, when you hover over it, in addition to the background color and text color, also change the width. To do this, write the CSS code like this:
Blok1 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; ) .blok1:hover ( background-color:# 000000; color:#ffffff; width:355px; )
Here's what it would look like in this case:
Point at me
Everything would be fine, but, as you can see, the properties change their values too abruptly, at the same moment, and it does not look very nice. What to do? It's very simple: use the property CSS transition.
About the transition property
The transition property makes the transition from one style to another smooth. For example, the color of a block when hovering over it with the mouse will not change abruptly, but over a certain period of time. Transition, by the way, translated into Russian means "transition". The property has the following entry:
Div ( transition:color 1s 1s linear; )
Naturally, other values can be used instead of the indicated values. Most browsers still don't recognize this property in its default form, so prefixes must be used.
Div ( transition:color 1s 1s linear; -moz-transition:color 1s 1s linear; -webkit-transition:color 1s 1s linear; -o-transition:color 1s 1s linear; )
In the examples, a short version of the record was indicated, the detailed one has the following form:
Div ( transition-property:color; transition-duration:1s; transition-delay:1s; transition-timing-function:linear; -moz-transition-property:color; -moz-transition-duration:1s; -moz-transition -delay:1s; -moz-transition-timing-function:linear; -webkit-transition-property:color; -webkit-transition-duration:1s; -webkit-transition-delay:1s; -webkit-transition-timing- function:linear; -o-transition-property:color; -o-transition-duration:1s; -o-transition-delay:1s; -o-transition-timing-function:linear; )
AT transition-property sets the property to which the transition action will be applied. For example: color, background-color, width, height, left, opacity, visibility and many others. You can specify multiple properties separated by commas. If you want to apply a transition to all possible properties at once, then set the transition-property to all. AT transition-duration indicate the time during which the transition will be carried out, in transition-delay the time after which the transition will begin. The transition-timing-function specifies the transition type, let's dwell on this property in more detail.
Learn more about transition-timing-function
Property transition-timing-function determines how the intermediate values will change during the transition, in other words, how the transition speed will change over the time specified in the transition-duration property. For example, the transition may start quickly, but slow down in the end, or not change its speed for the entire time. The transition-timing-function can have the following values:
- linear - the speed of the transition does not change from start to finish. Equivalent to cubic-bezier(0,0,1,1).
- ease - slow start, then speed up and slow down at the end. Equivalent to cubic-bezier(0.25,0.1,0.25,1).
- ease-in - slow start. Equivalent to cubic-bezier(0.42,0,1,1).
- ease-out - slow down at the end. Equivalent to cubic-bezier(0,0,0.58,1).
- ease-in-out - slow start and finish. Equivalent to cubic-bezier(0.42,0,0.58,1).
- cubic-bezier(n,n,n,n) - allows you to set your own values from 0 to 1.
Hover over the next block with the mouse and see for yourself how the transition is carried out with a particular function.
As you can see, depending on what value the transition-timing-function property has, the transition can be done in completely different ways. Although sometimes this difference is not very noticeable, for example, if the transition-duration is set to a small temporary value, or the block for which the effect is performed has small dimensions, and so on.
Examples of using the transition property
To make it easier for you to figure out how to use the transition property correctly, here are a few examples. I'll start, perhaps, with the simplest. Remember the block with changing width and color when hovering over it at the very beginning of the post? Let's do the same thing now, just using the transition property.
Example 1
Primer_1 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:all 1s linear; -moz-transition: all 1s linear; -webkit-transition:all 1s linear; -o-transition:all 1s linear; ) .primer_1:hover ( background-color:#000000; color:#ffffff; width:355px; )
Point at me
The example used linear function, I will use it later in the post. Of course, you can use absolutely any. The transition-property was set to all, meaning all possible properties, namely background color, text color, and width, changed their values over the same time and using the same function. In order for each property to change differently, you need to write them separated by commas with different values. Like this:
Primer_1_1 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -moz-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -webkit-transition:background-color 1s linear, color 1s 1s -o-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; ) .primer_1_1:hover ( background-color:#000000; color :#ffffff;width:355px; )
Point at me
In this case, all properties changed their values in turn, starting with the background color and ending with the width. Each property has its own function.
Example 2
We figured out the colors and sizes. Now let's make a block that disappears in motion.
Primer_2 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; opacity:1; transition:all 2s linear; - moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; ) .primer_2:hover ( opacity:0; margin-left:50px; )
Point at me
With help opacity properties and the margin-left block moves and disappears within two seconds.
Example 3
Another simple example. This time the text has a white shadow, although in this case it looks more like a highlight than a shadow, but that's what the property is called.
Primer_3 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:text-shadow 1s linear; -moz- transition:text-shadow 1s 0 linear; -webkit-transition:text-shadow 1s linear; -o-transition:text-shadow 1s linear; ).primer_3:hover ( text-shadow:0 0 15px #ffffff; )
Point at me
We implemented this using the text-shadow property.
Example 4
Let's complicate the task a little, let's make the block spin.
Primer_4 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:transform 1.5s linear; -moz-transition :-moz-transform 1.5s 0 linear; -webkit-transition:-webkit-transform 1.5s linear; -o-transition:-o-transform 1.5s linear; ) .primer_4:hover ( transform: rotate(360deg); - moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); )
Point at me
Agree, it looks good, and you won’t even guess right away that this was done only with CSS. In the example, by the way, another new transform property was used. Many browsers only read it with vendor prefixes. Note that they must also be specified in the value of the transition property. Be sure to subscribe to learn more about the transform property. Soon a separate article will be devoted to it, as well as to many other properties.
Example 5
The CSS transition property, by the way, works well in combination with the :active pseudo-class. Block in this example should increase when you click and hold the mouse cursor on it. Let's check?
Primer_5 ( font-size:20px; background-color:#808080; color:#000000; width:325px; padding-top:18px; height:38px; cursor:pointer; text-align:center; transition:all 2s linear; -moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; ) .primer_5:active ( width:375px; height:85px; )
Press and hold
To implement this example, it was only necessary to increase the width and height values in the block with the :active pseudo-class.
There are actually a lot of ways to use the CSS transition property, and I'm sure there will be even more in the future. I brought only the most simple examples to demonstrate transition in action. Links, by the way, on my blog change their color when hovering over them with the mouse with the help of it. I think I'm pretty tired of you with a gray rectangle, but it managed to perfectly show everything that I wanted. Combined with other properties and graphics, transitions can do some pretty cool stuff. Try!
The CSS transition property allows you to set all the properties of a transition effect (a transition between two states of an element) in a single declaration.
This property is a shorthand for the following properties (the list follows the order in which values are specified):
Browser Support
| Property | Opera | IExplorer | edge |
|||
|---|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 12.1 10.5 -o- | 6.1 3.1 -webkit- | 10.0 | 12.0 |
CSS syntax:
transition: "property duration timing-function delay | initial | inherit"; /* it is allowed to list the transition effect separately for each property in one declaration */ /* the syntax would be: property | duration | timing function | delay,..., property | duration | timing function | delay */ /* not all values are allowed, but you must follow the order shown at the top of the example */ /* note that if you want to specify only delay, you will also need to specify duration (0s) */ /* i.e. . if you want to specify a delay of 4 seconds, then you need to write this transition: 0s 4s; */ transition: width 2s ease 100ms, height 1s linear 2s, background 0s 4s; /* See example at the bottom of the page */JavaScript syntax:
Object.style.transition = "width 3s ease-out 2s"
Property values
| Meaning | Description |
|---|---|
| transition-property | Specifies the name of the CSS property for which the transition effect is to be used. The default value is all. |
| transition-duration | Specifies how many seconds or milliseconds the transition effect takes. |
| transition-timing-function | Used to describe how intermediate values are calculated CSS properties, which is affected by the transition effect, while using a mathematical function (cubic Bezier curve). This essentially allows you to create an "acceleration" curve so that the speed of the transition can change over the duration of the transition effect. The default value is ease. |
| transition-delay | Specifies when the transition effect will begin (acts as a delay for the start of the effect). The default value is 0 seconds. |
| Sets a property to its default value. | |
| Specifies that the value is inherited from the parent element. |
CSS version
CSS3Inherited
No.Animated
No.Usage example
An example of a sliding search in CSS, using an attribute selector (with the specified value) and the transition generic property:
A transition is a smooth change in the properties of an element when you hover over it with the mouse cursor. With the :hover pseudo-class, the change is instantaneous, while transition allows you to set the duration and method of the transition.
Let's start with a simple example. We have several pictures, each of them should rotate by a small angle when the cursor is hovered over it (example 1).
Example 1: Applying transition
As soon as we move the cursor over any image, it smoothly rotates 15 degrees to the left (Fig. 1).
Rice. 1. Smooth image rotation
In the styles for :hover , we set the desired changes to elements on hover. The transition itself is added to the element's styles via the transition property. It has four parameters - one or more properties, animation duration, time function and time delay before animation.
Properties
By default, all properties specified inside :hover are animated. Sometimes some properties need to animate and some don't. In this case, all desired properties should be comma-separated in transition .
Transition: transform, border 1s;
Animation duration
This is the time during which the movement will last. Specified both in seconds (1s, 0.5s) and milliseconds (100ms).
Animation Delay
The movement does not have to start immediately, it is acceptable to add a small delay at the beginning, after the end of the specified time, the animation will immediately begin.
Time function
Animation can take place in different ways. For example, start slowly at the beginning of a movement and accelerate at the end, or vice versa. There are many options and they create all kinds of interesting effects. Animation speed is controlled by a special function linking time and movement. Here is how it looks on the chart (Fig. 2).
Rice. 2. Type of time function
The starting point has coordinates 0.0, 0.0, the end point - 1.0, 1.0, while the function along the y-axis can exceed these values up or down. As a result, it will look like the element first moves in the opposite direction, and then in the desired direction. So you can create the effect of rebound or inertia. Here are the most popular time function values.
- ease - the animation starts slowly, then speeds up and slows down again towards the end of the movement.
- ease-in - the animation starts slowly and speeds up towards the end.
- ease-out - animation starts quickly, slows down towards the end.
- ease-in-out - animation starts and ends slowly.
- linear - same speed from start to finish.
In example 2, a transition is used to smoothly slide the panel out from behind the left edge of the screen when the mouse cursor is hovered over it.
Example 2: Using the time function
If you have any questions about this code, please call me at 555-3298.There are a lot of style properties in this example, but they are only intended to create the desired design. The mouseover animation is done with two properties - transition sets the animation parameters, and left is a property whose value smoothly changes over time (in this case, within one second). Initially, left is -320px and most of the panel is hidden behind the left edge of the browser, only a small part is visible. Then left becomes zero and thus the whole panel becomes visible.
In styles, it is allowed to add several transitions at once with different properties and effects, this allows you to diversify transitions. Example 3 shows how to create a button that smoothly changes the background color, border, and label. In this case, the animation of the text is different from the animation of other parts.