HTML and CSS Reference
In-Depth Information
Transitions
The CSS3 Transitions module offers a great way to add transitional properties to certain elements. Transitions can be
applied to background, color, height, width, and other specific properties, or the special “all” keyword can be used
to apply transitions to all properties on the element. Transitions allow the ad experience to expand and contract,
creating an iconic rich media expansion effect. Listing 5-9 shows how to transition the ad container to expand 500
pixels when a user clicks the CTA (let's also add a bit of JavaScript).
Listing 5-9.
CSS Transitions Example
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
* {
font-family: Verdana;
}
#ad {
position: absolute;
left: 30px;
top: 30px;
width: 300px;
height: 250px;
background-color: white;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
background:
url(logo.png) 20px 10px no-repeat,
url(300x250Bg.jpg) 0px 0px repeat;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#cta {
position: absolute;
top: 190px;
left: 160px;
color: white;
font-size: 16px;
cursor: pointer;
text-shadow: 0px 0px 5px #000000;
