Compare Revisions

Using CSS transitions

Revision 349979:

Revision 349979 by Sheppy on

Revision 352395:

Revision 352395 by ronj on

Title:
Using CSS transitions
Using CSS transitions
Slug:
CSS/Tutorials/Using_CSS_transitions
CSS/Tutorials/Using_CSS_transitions
Tags:
"css","CSS3","CSS Reference","CSS Transitions"
"css","CSS3","CSS Reference","CSS Transitions"
Content:

Revision 349979
Revision 352395
tt33    </p>
34    <h3>
35      Multiple animated properties example
36    </h3>
37    <h4>
38      HTML Content
39    </h4>
40    <pre class="brush: html">
41&lt;body&gt;
42    &lt;p&gt;The box below combines transitions for: width, heigh
 >t, background-color, transform. Hover over the box to see these p
 >roperties animated.&lt;/p&gt;
43    &lt;div class="box"&gt;&lt;/div&gt;
44&lt;/body&gt;
45</pre>
46    <h4>
47      CSS Content
48    </h4>
49    <pre class="brush: css">
50.box {
51    border-style: solid;
52    border-width: 1px;
53    display: block;
54    width: 100px;
55    height: 100px;
56    background-color: #0000FF;
57    -moz-transition:width 2s, height 2s, background-color 2s, -mo
 >z-transform 2s;
58    -webkit-transition:width 2s, height 2s, background-color 2s, 
 >-webkit-transform 2s;
59    -o-transition:width 2s, height 2s, background-color 2s, -o-tr
 >ansform 2s;
60    transition:width 2s, height 2s, background-color 2s, transfor
 >m 2s;
61}
62.box:hover {
63    background-color: #FFCCCC;
64    width:200px;
65    height:200px;
66    -moz-transform:rotate(180deg);
67    -webkit-transform:rotate(180deg);
68    -o-transform:rotate(180deg);
69    transform:rotate(180deg);
70}
71 
72</pre>
73    <p>
74      {{ EmbedLiveSample('Multiple_animated_properties_example', 
 >300, 300) }}

Back to History