}
#transDemo2 div:hover, #transDemo2 div.hover_effect {
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);
}
</style>
<div id="transDemo2">
<div class="hover">Hover on me and I'll spin and scale!</div>
</div>
<h1>CSS 3D Transforms</h1>
<?php
echo compat_table("CSS 3D Transforms", "12.0", "4.0", "10.0", "10.0", "12.0");
?>
<p>3D transforms are similar to 2D transforms. The basic properties are translate3d, scale3d, rotateX, rotateY and rotateZ. Translate3d and scale3d take three arguments for x,y and z, whereas the rotates just take an angle. Here are some examples:</p>
<style>
#transDemo4 {
width:400px;
height:190px;
margin:0 auto 10px;
border:1px #aaa solid;
padding:10px;
}
#transDemo4 div:not(.clear) {
<section id="how2animations">
<h1>CSS Animations</h1>
<?php
echo compat_table("CSS Animations", "4.0", "4.0", "5.0", "10.0", "12.0");
?>
<h2>How to use animations</h2>
<p class="note">As of March 2012, this is implemented in all browsers (at least as a dev version)</p>
<p>CSS animations were introduced into Webkit in 2007. In 2009 a <a href="http://www.w3.org/TR/css3-animations/">working draft</a> was written and added to the w3c site. Over the next three years support was gained by Firefox, Internet Explorer and finally Opera.</p>
<p>To use CSS animation, you first specify some keyframes for the animation - basically what styles will the element have at certain times. The browser does the tweening for you.</p>
<h2>Demo</h2>
<style>
@-webkit-keyframes resize {
0% {
padding: 0;
}
50% {
padding: 0 20px;
background-color:rgba(255,0,0,0.2);
}
100% {
padding: 0 100px;
background-color:rgba(255,0,0,0.9);
}
}
@-moz-keyframes resize {
0% {
padding: 0;
}
50% {
padding: 0 20px;
background-color:rgba(255,0,0,0.2);
<section id="how2transitions">
<h1>CSS Transitions</h1>
<?php
echo compat_table("CSS transitions", "1.0", "3.2", "4.0", "10", "10.5");
?>
<h2>How to use transitions</h2>
<p>If you haven't used transitions before, here's a brief introduction.</p>
<p>On the element you want to have animate, add the following CSS:</p>
<pre class="prettyprint lang-css">
#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
</pre>
<p>There is a lot of duplication due to vendor prefixes - until the specification if finalised, this will persist. If this bothers you, there are various tools such as <a href="http://wiki.github.com/anthonyshort/csscaffold/">CSS Scaffold</a>, <a href="http://lesscss.org/">LESS</a>, or my preference - <a href="http://sass-lang.com/">SASS</a>, that allow you to define mixins to avoid repetitive code.</p>
<p>Another approach is simply to write the CSS without the prefixes, then use <a href="http://leaverou.github.com/prefixfree/">Lea Verou's -prefix-free</a> to add them in at runtime.</p>
<p>Something you definitely shouldn't do is to only include the webkit prefix. Tempting though it seems, particularly when developing for mobile devices, webkit isn't the only rendering engine!</p>
<p>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 options for the timing function are shown below.</p>
<p>Whenever any property changes, then it will animate instead of changing directly. 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. The example below uses :hover to change the properties – no javascript is needed.</p>
<p>To see the difference in speed, have a look at the <a href="/demos/speed.php">speed test</a>.</p>
<style>
#timings_demo {
position:relative;
width:500px;
height:400px;
margin:0 auto 10px;
}
#transDemo2 div:hover, #transDemo2 div.hover_effect {
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);
}
</style>
<div id="transDemo2">
<div class="hover">Hover on me and I'll spin and scale!</div>
</div>
<h1>CSS 3D Transforms</h1>
<?php
echo compat_table("3D CSS Transforms", "12.0", "4.0", "10.0", "10.0", "12.0");
?>
<p>3D CSS transforms are similar to 2D CSS transforms. The basic properties are translate3d, scale3d, rotateX, rotateY and rotateZ. Translate3d and scale3d take three arguments for x,y and z, whereas the rotates just take an angle. Here are some examples:</p>
<style>
#transDemo4 {
width:400px;
height:190px;
margin:0 auto 10px;
border:1px #aaa solid;
padding:10px;
}
#transDemo4 div:not(.clear) {
