The HTML and CSS Workshop by Lewis Coulson Brett Jephson Rob Larsen Matt Park 
 and Marian Zburlea

Author:Lewis Coulson, Brett Jephson, Rob Larsen, Matt Park,
 and Marian Zburlea
Language: eng
Format: epub
Publisher: Packt Publishing Pvt. Ltd.
Published: 2020-12-29T00:00:00+00:00

CSS Transitions

CSS transitions are used throughout the modern web and, in short, they enable CSS properties to change values, thus creating a simple animation. CSS transitions are the basic fundamentals of CSS animations and are the basis of creating more advanced animations. However, transitions in themselves can create a whole world of effects. A common example of a CSS transition would be that the change in the color of an element on hover but rather than the color changes snapping straight away, they would have a more subtle transition from color 1 to color 2 over 250 or 500 milliseconds, instead of an instant change.

To demonstrate a very simple example with a color change, take a look at the following code snippet, which you can copy and paste into any of your HTML files, or into a new one, to see it in action:

<style>

p {

transition: 250ms;

}

p:hover {

background-color: darkolivegreen;

color: white;

}

</style>

<p>This is a very simple example of a transition</p>

The preceding code snippet will change the p element on its hover state to have a background color of 'darkolivegreen' (from the default of white) and a text color of 'white' (from the default of black). The code says that the change in colors should take 250 milliseconds.

A transition in CSS will describe how a property of a given CSS selector should display the change when given a different value. The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.

A transition will require a minimum of one value, that is, the duration of the animation, which is a numeric value. In our example, we used the most common unit, which is s for seconds.

The following screenshot shows the transition-duration property with a value of 0.2 seconds:

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.