Dec
16
0

Going nuts with CSS transitions

Author admin    Category CSS, Photos     Tags , , , ,

This article is going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site. You’ll see it’s so easy to handle the image effects with only writing lines of CSS words, no javascripts, no coding. just it is!

Related properties include:

  • -webkit-box-shadow
  • -moz-box-shadow
  • box-shadow
  • -webkit-transform
  • -moz-transform
  • transform
  • -webkit-transition

Read the original article here.

Note with the hovering examples that the animation will reverse itself when the mouse moves out of the div. Any time the property changes value, the animation will simply start again with the current position as the from value and the new value as the destination. The transition properties of the source state are used to figure out how to animate to the new target state.

The key points to understand about transitions are:
(1) They are implicit animations. Scripts and stylesheets can be written as normal, and the animations will simply happen implicitly as the properties change values.
(2) They degrade gracefully. Browsers that do not support transitions simply won’t animate, but otherwise all code and style rules can remain the same.

Here are more detailed descriptions of the properties. All of these properties can take multiple comma-separated values.

transition-property
Values: none | all |
Initial Value: all
Description: Specifies what property triggers an animation. A value of none means there is no transition. A value of all means that every animatable property triggers an animation. Otherwise an animation will only trigger when the exact specified property changes value.

transition-duration
Values:
Inital Value: 0
Description: Specifies how long the transition should take. The default is 0.

transition-timing-function
Values: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
Initial Value: ease
Description: The transition-timing-function property describes how the animation will proceed over time. Keywords can be used for common functions or the control points for a cubic bezier function can be given for complete control of the transition function. To specify a cubic bezier function, you give an X and Y values for 2 of the control points of the curve. Point P0 is implicitly set to (0,0) and P3 is implicitly set to (1,1). These 4 points are used to compute a cubic bezier curve.

The timing function keywords have the following definitions:
linear – The linear function just returns as its output the input that it received.
defaultease – The default function, ease, is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).
ease-in – The ease-in function is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out – The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out – The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier – Specifies a cubic-bezier curve whose P0 and P3 points are (0,0) and (1,1) respectively. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2).

Here’s another demo created by myself after reading this article. really exciting exercise!!

Post comment