![css3 menu coupon outline css3 menu coupon outline](http://css3menu.com/images/templates/frame.gif)
Other browsers do things differently, but as Webkit is popular on mobile where these things matter most, it's worth noting this special case. These are the animations that Webkit accelerates. At the time of writing there are three classes defined here: PropertyWrapperAcceleratedOpacity, PropertyWrapperAcceleratedTransform and PropertyWrapperAcceleratedFilter.
#Css3 menu coupon outline code#
To see the methods that Webkit accelerates, take a look at the AnimationBase.cpp code from the Webkit source. In addition, many browsers hardware accelerate animations that don't require repaints, namely opacity, 3D transforms and filters. Many of these properties are not supported by default by jQuery animation, making CSS transitions much more useful out of the box. These include everything from background-color and letter-spacing to text-shadow and min-height. The W3C maintain a list of properties that can be animated on the CSS Transitions spec. Regarding the properties you can animate, the best way is to experiment. To see the difference in speed, have a look at the speed test. The example below uses :hover to change the properties – no javascript is needed. This can be due to a different set of properties set on a pseudo class such as hover, or a new class or properties set by javascript. Whenever any property changes, then it will animate instead of changing directly. The options for the timing function are shown below. The syntax is pretty straightforward, you specify the property you want to animate, all or border-radius or color or whatever, the time to run, then the transition timing function. The betas of IE10 did use the prefix however, so you may see code using -ms. IE10 was the first browser to ship without a prefix on these. It's worth noting as well that there isn't an -ms- prefix on these properties. Tempting though it seems, particularly when developing for mobile devices, webkit isn't the only rendering engine! Something you definitely shouldn't do is to only include the webkit prefix. If this bothers you, there are various tools such as CSS Scaffold, LESS, or my preference - SASS, that allow you to define mixins to avoid repetitive code.Īnother approach is simply to write the CSS without the prefixes, then use Lea Verou's -prefix-free to add them in at runtime. There is a lot of duplication due to vendor prefixes - until the specification if finalised, this will persist. On the element you want to have animate, add the following CSS: If you haven't used transitions before, here's a brief introduction.