Firefox trunkにtransitionとかが入った - 素人がプログラミングを勉強していたブログ

CSS Transitionsと呼ばれる機能で、CSSでアニメーションとかを実現する物。Safariには前からあった。

    <style>
body {
  -moz-transition: 5s all linear 0s;
  -webkit-transition: 5s all linear 0s;
  transition: 5s all linear 0s;
  text-align: center;
  text-shadow: 1px 1px 1px white;
  font-size: 10em;
}
    </style>
<script>
setInterval(function () {
  var color = Math.random().toString(16).substring(2,8);
  document.body.style.color = "#" + color;
  document.body.style.backgroundColor = "#" + Math.abs(0xffffff - parseInt(color, 16)).toString(16);
}, 5000);
</script>
  </head>
  <body>
    <p>π&#8776;3.1416</p>

補色はMath.abs(0xffffff - color)で作れる。
JavaScriptから見たCSS Transitionsの話。
getComputedStyleは、アニメーション途中のスタイルも取れる。

getComputedStyle(document.body, null).color // rgb(59, 84, 139)とか

getClientRects/getBoundingClientRectsも動的な値を返す。

document.body.style.color = "white"; document.body.style.color = "black";

のように、アニメーションが完了する前に次の値をセットすると、アニメーションの完了を待つことなく次のアニメーションがはじまる。