Skip to content

Monday, October 24, 2011

Note about CSS3 transition animations

| no comments yet

If your animation doesn't seem to work, check the units used in the property that is not animating. For example: the width won't animate if the previous value is specified in pixels and the new value is in percentages.

This happened to me in RockMelt (version 0.9.68.1362, build 887eaf8). Mozilla's FireFox (7.0.1) seems to cope better with this situation and still do the animation.

For example, if you have something like this:

<style>#testAnim {
display: block;
-webkit-transition-duration: 1.7s;
-moz-transition-duration: 1.7s;
-o-transition-duration: 1.7s;
-ms-transition-duration: 1.7s;
transition-duration: 1.7s;
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
-webkit-transition-property: border-radius;
-moz-transition-property: border-radius;
-o-transition-property: border-radius;
-ms-transition-property: border-radius;
transition-property: border-radius;
border-radius: 4px; padding: 25px; border: 1px solid red;
}
#testAnim:hover {border-radius: 50%}
#testAnim:focus {border-radius: 33px}
</style><a id="testAnim" href="#">Test by hovering</a>
Test by hovering and by tab'ing into this link. On some browsers the :hover won't animate but the :focus will

The CSS Transitions Module Level 3 spec doesn't seem to mention these kinds of situations

Wednesday, March 2, 2011

Whatever it may mean

| no comments yet

Back in the day when I was a kid me and my friends played a lot of video games. We didn't speak English at the time (counting to 10 in that language was a big deal), so videogame-English was its own language that we deciphered and defined on our own.

Game Over did not mean the game ended, it meant the asshole hogging the controller had to back off and let someone else play. Game Over meant Game Beginning.