2008-12-02

WebKit CSS Transitions

Tested with Safari 3.2.1

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title></title>

<style type="text/css">
* {
  margin: 0;
  padding: 0;
  border: 0;
}
html, body {
  background-color: #000;
  color: #fff;
  text-size: 100%;
}
#viewport {
  background-color: #fff;
  color: #888;
  width: 20em;
  height: 15em;
}
#viewport h2 {
  cursor: pointer;
  position: absolute;
  font-size: 400%;
  z-index: 1;
  text-shadow: #000 0 0 0;
  -webkit-transition: z-index 0.25s linear;
  -webkit-transition: color 0.25s linear;
  -webkit-transition: text-shadow 0.25s linear;
}
#viewport h2:hover {
  opacity: 1;
  color: #000;
  z-index: 10;
  text-shadow: #fff 0.1em 0.1em 0.1em;
}
#id-0 { top: 1em; left: 1em; }
#id-1 { top: 1.5em; left: 0.5em; }
#id-2 { top: 2em; left: 1.25em; }
#id-3 { top: 2.3em; left: 0.5em; }
#id-4 { top: 2.75em; left: 1.25em; }

</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// nothing to see here
</script>

</head>

<body>
<h1>WebKit Transitions</h1>

<div id="viewport">
  <h2 id="id-0">Lorem</h2>
  <h2 id="id-1">Ipsum</h2>
  <h2 id="id-2">Dolor</h2>
  <h2 id="id-3">Sit</h2>
  <h2 id="id-4">Amet</h2>
</div>

</body>
</html>
By