HTML and CSS Reference
In-Depth Information
100% {
-webkit-box-shadow: 0px 0px 0px #999999;
box-shadow: 0px 0px 0px #999999;
}
}
@-ms-keyframes "glow" {
0% {
box-shadow: 0px 0px 0px #999999;
}
50% {
box-shadow: 5px 5px 15px #ffffff;
}
100% {
box-shadow: 0px 0px 0px #999999;
}
}
@-o-keyframes "glow" {
0% {
box-shadow: 0px 0px 0px #999999;
}
50% {
box-shadow: 5px 5px 15px #ffffff;
}
100% {
box-shadow: 0px 0px 0px #999999;
}
}
</style>
</head>
<body>
<div id=square></div>
</body>
</html>
If you're following along, don't get scared of the new keyframe block within CSS3. All this example does is apply a
glow animation using the box-shadow property in CSS to the square element in the DOM by using the percent method
of keyframing. The animation is even within publisher animation specs, since it's only 15 seconds long—you can see
this by viewing the animation-iteration-count. As you can see this is pretty long winded just to accomplish something
pretty simple so keep in mind that CSS also has a shorthand way of writing the properties for animation. Here's how
you'd write that glow example using the shorthand technique.
#square {
-webkit-animation: glow 1s 15s alternate forwards ease-in-out;
-moz-animation: glow 1s 15s alternate forwards ease-in-out;
-ms-animation: glow 1s 15s alternate forwards ease-in-out;
-o-animation: glow 1s 15s alternate forwards ease-in-out;
animation: glow 1s 15s alternate forwards ease-in-out;
}
