Animatable CSS properties in Opera 12

CSS3 transitions and animations don't just provide eye-candy for fancy demos — they also improve usability and enhance the user experience (when used in the right places). Although still at an experimental stage and not meant for production sites yet, they are being used more and more on the web thanks to better and better browser support.

At Opera, our core developers, locked away in a basement somewhere in Norway with only brown cheese to survive on, have been working hard to make our support even better. Opera 12, currently in beta, introduces keyframe animation support as well as an increase in the number of properties you can animate.

Based on Oli Studholme's exhaustive list, here is a rundown of animatable CSS properties in Opera 12. As well as for reference, hopefully this list can also be used for inspiration to test and combine some of the more unusual animations and transitional effects.

Text properties

• color
• font-size
• font-weight (not keywords)
• letter-spacing
• line-height
• text-indent
• text-shadow
• vertical-align (not keywords)
• word-spacing

Box properties

• background-color
• background-position
• border-color
• border-radius
• border-spacing (horizontal only)
• border-width
• box-shadow
• clip
• column-gap
• column-rule-color
• column-rule-width
• column-width
• height, min-height, max-height
• margin
• opacity
• outline-width
• outline-offset
• outline-color
• padding
• width, min-width, max-width

Positioning properties

• bottom
• top
• left
• right

Experimental properties

• -o-transform
• -o-transform-origin

And by the way, if you notice any discrepancies or strange behaviour with these in Opera 12, we'll give you a virtual hug if you report it in our bug wizard: https://bugs.opera.com/wizard/