Css Transition delay syntax and example, with hover and multiple properties

Transition property that is used to transite for object is newly added in Css 3, it can be set to four values, one of which is transition-delay, it contains two layers of meaning, respectively: the transition effect delay execution and time to maintain the changed state. The time is set short, the time to delay the transition effect and maintain the changed state is short, otherwise the time is long.

Transition-delay is similar to Transition-duration, it is a relatively simple property, only one number is required for setting. Let's look at the syntax rules of Transition-delay first, and then look at specific examples of different delay times.

I. Grammar rules of Transition-delay

transition-delay: <time>[, <time> * ]

II. Syntax description

1. Multiple sets of values can be set for Transition-delay, the default value is 0

A. <time> represents the first set of delay time, which cannot be omitted;

B. <time> in [] represents the second group delay time, which can be omitted;

C. * means the third group, the fourth group, ... the nth group delay time, which can be omitted;

2. The values of <time> is as follows:

The range of <time> is a floating point number between [0.0, 1.0]. If the filled value is not within this range, it will automatically calculate and take the closest value to the filled value.

III. Multiple examples of Css Transition delay(With Css transition delay multiple properties)

html code:

<ul class="transition-delay">
           <li class="time3s">Css hover transition delay: 0.3 seconds<br />transition-delay:.3s</li>
           <li class="time5s">Css hover transition delay: 0.5 seconds<br />transition-delay:.5s</li>
           <li class="time8s">Css hover transition delay: 0.8 seconds<br />transition-delay:.8s</li>
       </ul>

Css code:

<style type="text/css">
       .transition-delay{overflow:hidden;margin:0px;padding:0px;list-style:none;}

.transition-delay li{width:300px;height:60px;margin-bottom:10px;padding:6px;border:1px solid #b39e9e;background-color:#e0dedb;}

.transition-delay li.time3s{transition-property:background-color;transition-duration:.3s;transition-timing-function:ease;transition-delay:.3s;}

.transition-delay li.time5s{transition-property:background-color;transition-duration:.5s;transition-timing-function:ease-in;transition-delay:.5s;}

.transition-delay li.time8s{ transition-property:color;transition-duration:.8s;transition-timing-function:ease-in;transition-delay:.8s;}
       .transition-delay li:nth-child(1):hover{background-color:#fc0836;}

.transition-delay li:nth-child(2):hover{background-color:#fade7b;}
       .transition-delay li:nth-child(3):hover{color:#fd30a4;}
       </style>

Effect picture (move the mouse over it):

• Css hover transition delay: 0.3 seconds
  transition-delay:.3s
• Css hover transition delay: 0.5 seconds
  transition-delay:.5s
• Css hover transition delay: 0.8 seconds
  transition-delay:.8s