Testing Safari/Webkit’s CSS Transitions, where you can create smooth object animation and effects without Flash or jQuery, and very minimal JavaScript, if any. You need Safari 3.1+ to see at least some of these effects. In some cases, the effects only works on the iPhone.
21 June 2009
<style type="text/css">
/* red box rotates, translates, changes color, changes border size and border color, and creates a drop shadow */
#box{
width:100px;
height:100px;
background-color:red;
border:1px solid black;
position:absolute;
top:0px;
left:0px;
cursor:pointer;
-webkit-transition-property:background-color, left, top, border, -webkit-border-radius, -webkit-box-shadow, -webkit-perspective, -webkit-transform;
-webkit-transition-duration: 5s;
}
#box.endPos{
background-color:#00ff00;
border:5px solid orange;
left:300px;
top:200px;
-webkit-border-radius: 30px 50px;
-webkit-box-shadow: 100px 50px 50px #0000ff;
-webkit-perspective: 45;
-webkit-transform: rotate(360deg);
cursor:default;
}
/* image creates a reflection and rotate with the rotation like on a mirror */
#image{
position:absolute;
left:500px;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration:5s;
cursor:pointer;
padding:0;
height:280px;
}
#image #img img{
border:5px solid black;
}
#image #img.rotate{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration:3s;
-webkit-transition-timing-function:ease-in;
}
#image #img.rotate{
-webkit-transform:rotate(90deg);
-webkit-transform-origin:480px 270px;
}
#image.reflect{
-webkit-box-reflect:below 0;
cursor:default;
}
#marquee{
white-space:nowrap;
width:500px;
height:30px;
background-color:yellow;
position:absolute;
top:500px;
}
/* typical marquee effect, not seen since the late 90's */
#marquee.prestart{cursor:pointer;}
#marquee.marquee{cursor:default;}
#marquee.prestart .preMarquee,
#marquee.marquee .duringMarquee{
display:inline;
}
#marquee.marquee .preMarquee,
#marquee.prestart .duringMarquee{
display:none;
}
#marquee.marquee{
overflow-x:-webkit-marquee;
-webkit-marquee-direction: auto;
-webkit-marquee-increment:small;
-webkit-marquee-repetition: infinite;
-webkit-marquee-speed: fast;
-webkit-marquee-style: scroll;
}
/* have the object flip. on iPhone, it flips in perspective with foreshortening */
#persp{
-webkit-transform-style:preserve-3d;
-webkit-perspective:200;
width:300px;
height:300px;
background-color:rgba(56,108,179,1);
position:absolute;
top:600px;
}
#persp #perspChild1{
position:absolute;
width:100px;
height:100px;
background-color:rgba(255,255,0, 0.5);
top:100px;
left:100px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:5s;
-webkit-border-radius:10px;
-webkit-transform:rotateY(45deg);
cursor:pointer;
}
/* perspective only works in iPhone, but the object will still rotate along the Y access in 2-D */
#persp #perspChild1.persp{
-webkit-transform:rotateY(180deg);
cursor:default;
}
</style>
[...] Safari/Webkit CSS Transitions – this is pretty awesome. A bunch of different effects without (or with very teeny amount of) JavaScript. [...]