CSS3 Transitions/Animations
The CSS3 transition property works between two states of an element using a selector (tag, id, or class). For the most part the state of an element is static, unless it is acted upon by a pseudo class like ":hover", ":visited", or ":active". The most common example of this in web design in when a user hovers over a link - the <a> tag in HTML, "a:hover" in the CSS - or when a user clicks a link - "a:active" in the CSS. These pseudo classes "a:hover" and "a:active" affect the link when it is being hovered over or clicked respectively. These classes can be attached to other tags in HTML to change the CSS of that element (i.e. "p:hover", "div:active"). See below for some examples.
1a. Hovering over this element should change the size automatically.
In the case above, the state of the paragraph element has the class "oneA" with a font size of 20 pixels. When the paragraph tag is hovered over - "p:hover" - the font size of the element changes to 30 pixels. Since the state changes on that hover action, the size changes immediately.
1b. Hovering over this element should change the size slowly.
In this case, the element with the class "oneB" has transition properties. These two properties are "transition-property" and "transition-duration". The "transition-property" selects what you want to transition. In the CSS code it is "transition-property: font-size;", since we want to transition the size of the text. The "transition-duration" is how long the transition takes. In the CSS code it looks like "transition-duration: 2s;", since I wanted the duration to take place over two seconds. The last part to making this work is adding the new property to the font. This is the same code as the class that does not transition, so if we want the text to be a certain size when hovered over I set the new font property as "font-size:25px;".
The transition properties can also be applied to containers - "div" or "span" tags that are used to format a website. The class "two" expands when clicked on. In this case, the transition property is set to "transition-property: width;" with a two second delay.
Click on the box below.
These transitions can be applied with other tags and states to create animations without using a lot of code. As with most CSS3 in 2012, the transition properties work best in Mozilla Firefox, Safari, or Google Chrome with the added "-moz-" or "-webkit-" before the line of CSS3 codes. If you cannot view these animations, you can switch to one of the browsers listed previously.
Regards,
Luke Hoehn
June 4, 2012
