Delays and advanced tricks

Half a second is a long time on a screen. Give the button from the previous lesson the declaration transition: background-color 0.5s ease 0.5s, and nothing visible happens for the first 500 milliseconds after the pointer arrives. That waiting time before a transition starts is called the delay, and it is the second time value in the shorthand.

Adding a delay

Here is the button with a delay of 0.5 seconds. The duration is still 0.5 seconds, so the whole change now takes one second from the moment the pointer arrives.

<!DOCTYPE html>
<html lang="en">
<head>