24 Reader Comments

1. 

   XaviJr 1:00 pm on February 17, 2011

   Strange, i’m trying your example of the background transition and it doesn’t seem to work on Firefox 3.6.13 or Opera 11, only works on Chrome.

   a.foo {
     padding: 5px 10px;
     background: #9c3;
     -webkit-transition-property: background;
     -webkit-transition-duration: 0.5s;
     -webkit-transition-timing-function: ease;
     -moz-transition: background 0.3s ease;
     -o-transition: background 0.3s ease;
     transition: background 0.3s ease;
   }

   Embed
   Copy & paste the code below to embed this comment. <figure class="embedded-quote" id="ala-embedded-comment-330515"><blockquote> <p>Strange, i’m trying your example of the background transition and it doesn’t seem to work on Firefox 3.6.13 or Opera 11, only works on Chrome. </p><p>a.foo {<br />  padding: 5px 10px;<br />  background: #9c3;<br />  -webkit-transition-property: background;<br />  -webkit-transition-duration: 0.5s;<br />  -webkit-transition-timing-function: ease;<br />  -moz-transition: background 0.3s ease;<br />  -o-transition: background 0.3s ease;<br />  transition: background 0.3s ease;<br />}</p></blockquote><figcaption>— XaviJr on <a href="http://alistapart.com/comments/understanding-css3-transitions#330515">Understanding CSS3 Transitions</a></figcaption></figure> <script async data-comment="330515" charset="utf-8" src="http://d.alistapart.com/_/js/comment-embed.min.js"></script>
2. 

   Fat Aido 10:00 pm on February 24, 2011

   Agreed.
   Using Firefox 3.6.3. I am also unable to get the transition to work. Fails on IE v8.0 too.
   I made the duration 20 seconds in the hope of seeing some difference and -color to each of the attributes but still no go!?

   a.foo
   {
     padding: 5px 10px;
     background-color: #9c3;
     -webkit-transition: background-color 20.0s ease;
     -moz-transition: background-color 20.0s ease;
     -o-transition: background-color 20.0s ease;
     transition: background-color 20.0s ease;
   }

   Embed
   Copy & paste the code below to embed this comment. <figure class="embedded-quote" id="ala-embedded-comment-330562"><blockquote> <p>Agreed.<br />Using Firefox 3.6.3. I am also unable to get the transition to work. Fails on IE v8.0 too.<br />I made the duration 20 seconds in the hope of seeing some difference and -color to each of the attributes but still no go!?</p><p>a.foo <br />{<br />  padding: 5px 10px;<br />  background-color: #9c3;<br />  -webkit-transition: background-color 20.0s ease;<br />  -moz-transition: background-color 20.0s ease;<br />  -o-transition: background-color 20.0s ease;<br />  transition: background-color 20.0s ease;<br />}</p></blockquote><figcaption>— Fat Aido on <a href="http://alistapart.com/comments/understanding-css3-transitions#330562">Understanding CSS3 Transitions</a></figcaption></figure> <script async data-comment="330562" charset="utf-8" src="http://d.alistapart.com/_/js/comment-embed.min.js"></script>
3. 

   Fat Aido 10:39 pm on February 24, 2011

   Yay! Just installed mozilla v4.0 and that fixed the problem. When will IE catch up?

   Embed
   Copy & paste the code below to embed this comment. <figure class="embedded-quote" id="ala-embedded-comment-330563"><blockquote> <p>Yay! Just installed mozilla v4.0 and that fixed the problem. When will IE catch up?</p></blockquote><figcaption>— Fat Aido on <a href="http://alistapart.com/comments/understanding-css3-transitions#330563">Understanding CSS3 Transitions</a></figcaption></figure> <script async data-comment="330563" charset="utf-8" src="http://d.alistapart.com/_/js/comment-embed.min.js"></script>
4. 

   hendriono 12:56 pm on June 19, 2012

   Very easy to learn and understand… Thanks Dan…

   Embed
   Copy & paste the code below to embed this comment. <figure class="embedded-quote" id="ala-embedded-comment-332759"><blockquote> <p>Very easy to learn and understand… Thanks Dan…</p></blockquote><figcaption>— hendriono on <a href="http://alistapart.com/comments/understanding-css3-transitions#332759">Understanding CSS3 Transitions</a></figcaption></figure> <script async data-comment="332759" charset="utf-8" src="http://d.alistapart.com/_/js/comment-embed.min.js"></script>