Please note:
This CSS3 text transition property tutorial works perfectly fine only in Google Chrome.
Text is the most integral part of every website. Usually text is preferred to be as simple as possible, but if there is no variation or effect given to the text on the pages, then it rather makes the website more monotonous and uninteresting. With the help of this tutorial, we can actually give our text, different types of effects (transition effects specifically), which does contribute to the overall look and feel of the page.
Style given to the above text effect is as:
|
.text1{
color:#009999;
font-family:Arial, Helvetica, sans-serif;
font-size:50px;
font-weight:bold;
-webkit-transition-property:color, text;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
-moz-transition-property:color, text;
-moz-transition-duration:1s;
-moz-transition-timing-function: linear, ease-in;
-o-transition-property:color, text;
-o-transition-duration:1s;
-o-transition-timing-function: linear, ease-in;
}
.text1:hover{color:#003399;
}
|
Explanation of the above style
‘-webkit-transition-property’ helps us to provide transition between the colors.
‘-webkit-transition-timing-function’ is a mathematical function that is used to produce a smooth transition (Linear, Ease-in, Ease-out). This is commonly known as easing function. We can use constants to specify preset points of the curve or the cubic-bezier function to specify your own points.
According to the above code, on rollover / mouseover, the transition takes place linearly, whereas on rollout the transition style is ease-in. The timing function is specified using a cubic Bezier curve. You can have a detailed information regarding the cubic bezier function from http://www.dr-mikes-maths.com/. This property allows a transition to change speed over its duration.
‘-webkit-transition-duration property’ helps specify the duration at which we would like the color change transition to take place.
Similarly ‘-moz’ and ‘-o’ property tags should work for mozilla and IE browsers respectively.
To make best of your learning, check our work. It should give you some inspiring ideas on what you can try next.
You can also write to me at jayanthi at imajineweb dot com.