CSS Tutorial

This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

transition
CSS transition property allows you to animate changes in an element's style properties over a specified duration. They provide a simple and efficient way to add animations to web elements without the need for complex JavaScript code or external libraries.
CSS transition property is a shorthand property for
﻿transition-property﻿
﻿transition-duration﻿
﻿transition-timing-function﻿
﻿transition-delay﻿
transition-behavior (This property is on an experimental basis and may not be supported).
Possible Values
﻿<length> − A specific length value such as pixels (px), centimeters (cm), inches (in), etc.
Applies to
All elements, ::before and ::after pseudo-elements.
Syntax
transition: margin-right 4s;
transition: margin-right 4s 1s;
transition: margin-right 4s ease-in-out;
transition: margin-right 4s ease-in-out 1s;
transition: display 4s allow-discrete;
transition: margin-right 4s, color 1s;
The value for the transition property is defined as one of the following:
The none value indicates that there will be no transitions on this element. This is the default value.
Commas are used to separate one or more single-property transitions.
A single-property transition specifies the transition for one specific property or all properties. This includes:
A zero or one value indicating the property or properties for which the transition should be applied. This can be specified as:
A <custom-ident> representing a single property.
The all value in transitions indicates that the transition will be applied to all attributes that change when the element changes its state
If no value is specified, all value will be assumed, and the transition will apply to all changing properties.
Specify zero or one <easing-function> value indicating the easing function to be used.
Specify zero, one, or two <time> values for transition properties. The first parsed-time value is applied to transition-duration, and the second is assigned to transition-delay.
If a property has discrete animation behaviour, a zero or one value indicates whether to initiate transitions. If the value is present, it can be either allow-discrete or normal keyword.
CSS transition - With Two Values
The following example demonstrates that transition is applied to the padding property with a duration of 2s. When you hover over the box, padding increases to 15px and the background color changes to greenyellow 
<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      transition: padding 2s;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>
CSS transition - delay Value
The following example demonstrates that transition is applied to the padding property. The transition takes 2s to complete, and it starts after a delay of 0.5s 
<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      transition: padding 2s .5s;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>
CSS transition - easing Function
The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth color transition with an ease-in-out timing function over the 4s duration 
<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 15px;
      transition: background-color 4s ease-in-out;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>
CSS transition - easing Function and delay
The following example demonstrates that transition is applied to the padding property. When you hover over the box, background color changes to green-yellow and padding increases to 15px, starting a smooth transition over the duration of 4s with an ease-in-out timing function and a delay of 0.7s 
<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 5px;
      transition: padding 4s ease-in-out 0.7s;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
      padding: 15px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>
CSS transition - behavior Value
The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth transition over the duration of 5s using the allow-discrete timing function 
<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 10px;
      transition: background-color 5s allow-discrete;
      background-color: lightskyblue;
   }
   .box:hover {
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>
CSS transition - Applied To Two Properties
The following example demonstrates that transition will be applied on text color in 2s and on margin-left in 4s. The text color will transition in 2s, while the left margin will take 4s 
<html>
<head>
<style>
   .box {
      font-size: 14px;
      width: 100px;
      padding: 10px;
      transition: color 2s, margin-left 4s;
      background-color: lightskyblue;
   }
   .box:hover {
      color: red;
      margin-left: 70px;
   }
</style>
</head>
<body>
   <div class="box">Hover over me</div>
</body>
</html>
CSS transition - Related Properties
Following is the list of CSS properties related to transition:
property
value
﻿transition-delay﻿
Determines the amount of time to wait before starting a transition effect when a property's value changes.
﻿transition-duration﻿
Determines amount of time that a transition animation should take to complete.
﻿transition-property﻿
Specifies which CSS properties should have a transition effect applied.
﻿transition-timing-function﻿
Determines which intermediate values are generated for CSS properties affected by a transition effect.
P
﻿
﻿
﻿
﻿
﻿

property	value
transition-delay	Determines the amount of time to wait before starting a transition effect when a property's value changes.
transition-duration	Determines amount of time that a transition animation should take to complete.
transition-property	Specifies which CSS properties should have a transition effect applied.
transition-timing-function	Determines which intermediate values are generated for CSS properties affected by a transition effect.

CSS Tutorial

CSS Advanced

CSS3 Tutorial

CSS Responsive

CSS References

CSS tools

CSS Resources

CSS Tutorial

transition

Possible Values

Applies to

Syntax

CSS transition - With Two Values

CSS transition - delay Value

CSS transition - easing Function

CSS transition - easing Function and delay

CSS transition - behavior Value

CSS transition - Applied To Two Properties

CSS transition - Related Properties