CSS Tutorials

The Css3 -moz-transition property and the flash website design.

Written by saiful24

What is Css3 -moz-transition?

-moz-transition is a property of Css3 which helps to represent the transition effect with a certain speed in the Mozilla Firefox browser. The reason of using -moz is to make the property supportive for the Mozilla Firefox browser.

Anyway, things we are going to learn from this post:

  1. What is Css3 -moz-transition?
  2. What is transition (in Css3)?
  3. Why it is important?
  4. How to use the Css3 -moz-transition property?
  5. The basic structure of this property.
  6. Where do we use this property?
  7. Example: executing for a single attribute, executing for multiple attributes.

In this post, I will discuss the transition property only for the specific browser – Mozilla Firefox. But some of you mightn’t heard about this word. So, before learning about this property we should know the meaning of transition and it’s relation with css 3.

What is transition (in Css3) ?

The synonyms of transition is alteration, change of condition, exchange, etc. To animate any object or environment we need to alter into another situation dynamically. To have a dynamic view the appearance of the fourth dimension (Time) becomes the most needed element to have a sleek effect. When the change of situation occurs within a certain timeframe then we can consider it as a transition.

Why it is important?

To create flash effects, web designers need to provide instructions for execution with respect to time. When those instructions start running with respect to time there creates smooth and dynamic view.  That means if we can exchange a particular situation within a timeframe through providing instructions in the Cascading style sheet (CSS) form then we can ensure the flash website design.

Anyway, let’s have a look at the overall purposes:

  1. Creating animated actions.
  2. Providing interactivity.
  3. Making a site more dynamic.
  4. Having an attractive design.
  5. Creating flash websites.

Where can we use this property?

While using the hover effect, we use this property to perform the hover action smoothly. So, we have to add the fourth dimension (time) within the CSS script.

Let’s have a look at the following example-

  1. How to use Css3 –moz-transition property?

2. Where do we use this property?

Let’s consider those HTML tags that I will use to animate –

<div id=”tech”>

Outline:

  1. What is Css3 –moz-transition
  2. How to use this property

References:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

 

About the author

saiful24

This is author biographical info, that can be used to tell more about you, your iterests, background and experience. You can change it on Admin > Users > Your Profile > Biographical Info page.”