In this chapter, we are going to add some lovely animations to the theme to give the end users of the site a better user experience. We will learn how to create a dropdown cart in the header and how to insert jQuery animations and CSS3 transitions.
The following topics will be covered in this chapter:
With CSS3, we can add an effect that allows you to change theme from one style to another without using Flash animations or JavaScripts. As you know, Flash is not supported on Apple devices, so it is recommended that you don't use it for new projects.
You can use jQuery animations that guarantee full browser support to create simple and nice effects, but with CSS3 you can create the same stuff with less code.
You can use CSS3 transitions with all the modern browsers; Internet Explorer 10, Firefox, Chrome, and Opera support the transition property. You can see a full compatibility table at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions#Browser_compatibility.
Internet Explorer 9 (IE9) and earlier versions do not support the transition property. A best practice to add optional CSS classes, depending on the browser in use, consists of including the JS Modernizr. Modernizr detects the browser being used and appends several classes to the body of the code based on that. In this way, you can target some browsers and add conditional styles for them. For example, if you want to add a different style to a button while hovering for IE9 that doesn't support transition, you can do with Modernizr. You can find out more about this JS at http://modernizr.com/.
To include CSS3 transitions effects, you must specify parameters for the following:
In the following example, the transition effect is applied to the opacity
property and the duration is set to 2 seconds:
div { opacity:0.5; transition: opacity 2s; -webkit-transition: opacity 2s; -moz-transition: opacity 2s; }
The transition effect will show when the specified CSS property changes value. A typical CSS property can be changed by the user hovering the cursor over an element:
In the following example, div
changes the opacity from 0.5
to 1
when the mouse is hovered over some element.
div:hover { opacity:1; }
To add a transitional effect for more than one style, add more properties separated by commas. This can be done as follows:
transition: width 2s, height 2s, transform 2s;
The transition has the following four properties:
transition-property
transition-duration
transition-timing-function
transition-delay
You can specify all the properties, one on each line, as follows:
div { transition-property: opacity; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property: opacity; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Mozilla */ -moz-transition-property: opacity; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; }
Alternatively, you can specify all the properties in a single-line declaration using the shorthand transition
property in the following way:
div { transition: opacity 1s linear 2s; }
Now that we understand how the CSS3 transitions work, let's create our custom transition for the dropdown cart in the header.
3.19.75.133