Adding Incredible Effects to Magento Theme: Introducing CSS3 transitions

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:

  • The CSS property to which you want to add the transition
  • The duration of the effect

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;

}

Note: When we hover the cursor off the element, it gradually changes back to its original style.

1. Multiple property changes

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;

2. The CSS3 transition properties

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;

}

Note: As you can see, we duplicated the properties by adding the vendor- specific tags, for example, –moz-, to target Mozilla Firefox browser. You can use these tags to implement new transition features on the browsers that have not standardized them.

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.

Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.

Leave a Reply

Your email address will not be published. Required fields are marked *