Upcoming Firefox 4 CSS Transitions

21,11,2010 at 21:56 Yorum bırakın

<![CDATA[

Post Source

Introduced in Gecko 2 (Firefox 4)

CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly. For example, if you change the color of an element from white to black, normally the change is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.

Certain SVG properties can also be animated.

Note:
Because the CSS transitions specification is still in draft form, all properties associated with them are prefixed with “-moz-” for use in Gecko. For compatibility with WebKit, you should also use the “-webkit-” prefix, and for Opera compatibility, use the “-o-” prefix. So, for example, you would specify the transition property as -moz-transition, -webkit-transition, and -o-transition.

Example Video

If you’re running a recent Gecko or WebKit nightly build, you can try this live example by clicking here.

CSS transition properties

CSS transitions are controlled using the -moz-transition
shorthand property. This is the preferred way to set up your transitions, because it makes it easier to avoid getting your parameter list lengths out of sync, which can result in a frustratingly large amount of time spent debugging of your CSS.

If you wish, you can control the individual components of the transition using the following sub-properties:

-moz-transition-property
Specifies the name or names of the CSSproperties to which transitions should be applied. Only properties listed here are animated during transitions; changes to all other properties occur instantaneously as usual.
-moz-transition-duration
Specifies the duration over which transitions should occur. You can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time.
-moz-transition-timing-function
Specifies a cubic bezier curve used to define how intermediate values for properties are computed.
-moz-transition-delay
Defines how long to wait between the time a property is changed and the transition actually begins.

Detecting the completion of a transition

There is a single event that is fired when transitions complete. The “transitionend” event offers two properties:

propertyName
A string indicating the name of the CSS property whose transition completed.
elapsedTime
A float indicating the number of seconds the transition had been running at the time the event fired. This value isn’t affected by the value of -moz-transition-delay.

As usual, you can use the element.addEventListener()
method to monitor for this event:

el.addEventListener("transitionend", updateTransition, true);
Note:
The “transitionend” event doesn’t fire if the transition is aborted because the animating property’s value is changed before the transition is completed.

Properties that can be animated

CSStransitions can be used to animate the following properties.

Note:
The set of properties that can be animated is subject to change; as such, you should avoid including any properties in the list that don’t currently animate, because someday they might, causing unexpected results.
Property Value type

background-color

<color>

background-image

gradients only (not implemented as of 2010/04/11. see here)

background-position

<percentage>

<length>

background-size

<percentage>

<length>

border-color (including sub-properties)

<color>

border-radius,(including sub-properties)

<percentage>

<length>

border-width (including sub-properties)

<length>

border-spacing

<length>

bottom

<percentage>

<length>

-moz-box-flex

number

box-shadow

shadow

color

<color>

-moz-column-count

number

-moz-column-gap

<length>, keywords

-moz-column-rule-color

<color>

-moz-column-rule-width

<length>, keywords

-moz-column-width

<length>

clip

rectangle
fill paint
fill-opacity opacity-value
flood-color

<color> | keywords

font-size

<percentage>

<length>

font-size-adjust

number, keywords

font-stretch

keywords

font-weight

number | keywords (excluding bolder, lighter)

height

<percentage>

<length>

-moz-image-region

rect()

left

<percentage>

<length>

letter-spacing

<length>

lighting-color

<color> | keywords

line-height

number | 

<percentage>

<length>

margin (including sub-properties)

<length>

marker-offset

<length>

max-height

<percentage>

<length>

max-width

<percentage>

<length>

min-height

<percentage>

<length>

min-width

<percentage>

<length>

opacity

number

outline-color

<color>

outline-offset

integer

-moz-outline-radius (including sub-properties)

<percentage>

<length>

outline-width

<length>

padding (including sub-properties)

<length>

right

<percentage>

<length>

stop-color

<color> | keywords

stop-opacity opacity-value
stroke paint
stroke-dasharray dasharray
stroke-dashoffset

<percentage>

<length>

stroke-miterlimit miterlimit
stroke-opacity opacity-value
stroke-width

<percentage>

<length>

text-indent

<percentage>

<length>

text-shadow

shadow

top

<percentage>

<length>

-moz-transform-origin

<percentage>

<length>, keywords

-moz-transform

transform-function

vertical-align

<percentage>

<length>, keywords

visibility

visibility

width

<percentage>

<length>

word-spacing

<percentage>

<length>

z-index

integer

When property value lists are of different lengths

If any property’s list of values is shorter than the others, its values are repeated to make them match. For example:

div {
	 -moz-transition-property:opacity, left, top, height;
	 -moz-transition-duration: 3s, 5s;
	}

This is treated as if it were:

div {
	 -moz-transition-property:opacity, left, top, height;
	 -moz-transition-duration: 3s, 5s, 3s, 5s;
	}

Similarly, if any property’s value list is longer than that for -moz-transition-property, it’s truncated, so if you have the following CSS:

div {
	-moz-transition-property: opacity, left;
	-moz-transition-duration: 3s, 5s, 2s, 1s;
	}

This gets interpreted as:

div {
	-moz-transition-property: opacity, left;
	-moz-transition-duration: 3s, 5s;
	}

Read More
]]>

Reklamlar

Entry filed under: Cool Stuff, Css3, Out-source. Tags: , , .

A Beginner’s Guide to Google Website Optimizer CSS3 Media Queries

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Takvim

Kasım 2010
P S Ç P C C P
« Eki   Ara »
1234567
891011121314
15161718192021
22232425262728
2930  

Most Recent Posts


%d blogcu bunu beğendi: