CSS3 Tutorial: transitions

Afbeelding 1. CSS3 Transition.

transition-delay, transition-property, transition-duration, transition-timing-function

Syntax: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>
/*For example:*/

/* Mozilla browsers */
-moz-transition-delay: 0s;
-moz-transition-property: background;
-moz-transition-duration: 1s;
-moz-transition-timing-function: ease;

/* Webkit browsers */
-webkit-transition-delay: 0s;
-webkit-transition-property: background;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease;

/* Opera */
-o-transition-delay: 0s;
-o-transition-property: background;
-o-transition-duration: 1s;
-o-transition-timing-function: ease;

/* Internet Explorer */
-ms-transition-delay: 0s;
-ms-transition-property: background;
-ms-transition-duration: 1s;
-ms-transition-timing-function: ease;

/*general*/
transition-delay: 0s;
transition-property: background;
transition-duration: 1s;
transition-timing-function: ease;

CSS transitions allow CSS properties to change from one value to another in a specified periode of time. They are triggered by an occurring event, like a mouseclick or mouseover (hover) event. Let's examine a simple example of a button and a mouseover event, which trigger a change of background color in 1 second.

Example1: Button Hover effect using a background color transition

The HTML code

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 transition</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
    <div>
		<a href="#" class="button2 black2">Verstuur</a>
	</div>
</body>
</html>

The CSS

.button2 {
  display: inline-block;
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-family:  Arial, Helvetica, sans-serif;
  font-size:14px;
  padding: .5em 2em .55em;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius: .5em; 
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.button2:hover {
  text-decoration: none;
}  

.black2 {
  color: #d7d7d7;
  border: solid 1px #999;
  background: #999;
  
 
}
 /* For the sake of clearity we omit the vendor prefixes here*/
.black2:hover {
  background: #333;
   transition-property: background;
  transition-duration: 1s;
  transition-timing-function: ease;
}  

kleurverloop (gradiënt)
Image 1. CSS3 Transition.

Check this example in your browser

When it is your intention that the transition also occurs (but in opposite direction) on leaving the hover state, then simply place the CSS transition rules in the .black2{} section instead of the .black2:hover{} section
/* For the sake of clearity we omit the vendor prefixes here*/
.black2 {
  color: #d7d7d7;
  border: solid 1px #999;
  background: #999;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: ease;
}
  
.black2:hover {
  background: #333;
}  

Check this example in your browser

Leave a comment