CSS 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 \u200b\u200bchange. Most properties change their values \u200b\u200bin 16 milliseconds, so the recommended standard transition time is 200ms.<\/p>\r\n\r\n
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<\/a><\/span>. However, this pseudo-class does not work on mobile devices such as iPhone or Android. A generic solution that works in both desktop and mobile browsers would be JavaScript event handling (like switching classes on click).<\/p>\r\n\r\n Transitions apply to all elements as well as pseudo elements :before<\/a><\/span> and :after<\/a><\/span>. To specify all transition properties, we use the shorthand property which is – transition<\/a><\/span>.<\/p>\r\n Contains the name of the CSS properties to which the transition effect will be applied. A property value can contain either one property or a comma-separated list of properties. When creating a transition, you can use both the initial and final states of the element. The property is not inherited.<\/p>\r\n\r\n The effects you create should be subtle. Not all properties require a gradual change over time due to user experience. For example, when we hover over a link, we want to see an instant change of the link color or the color and underline style. Therefore, transitions should be used for those properties to which you really need to draw attention.<\/p>\r\n\r\n For a list of values that can be used, please see our transition-property<\/a> CSS property page.<\/p>\r\n\r\n Sets 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 transition duration is not specified, then the animation will not occur when changing property values. The property is not inherited.<\/p>\r\n\r\n For a list of values that can be used, please see our transition-duration<\/a> CSS property page.<\/p>\r\n\r\nCSS transition-property Property<\/h3>\r\n
Example Code<\/h4>\r\n
div {\r\nwidth: 100px;\r\ntransition-property: width;\r\n}\r\ndiv:hover {\r\nwidth: 300px;\r\n}<\/code><\/pre>\r\nCSS transition-duration Property<\/h3>\r\n
Example Code<\/h4>\r\n
div {\r\ntransition-duration: .2s;\r\n}<\/code><\/pre>\r\nVisual Example<\/h4>\r\n\r\n