HTML and CSS Reference
In-Depth Information
Compatibility
CSS3 Proposed
Chrome 3, Safari 3.1+
Notes
• WebKit supports this property as
-webkit-animation
.
• Firefox 3.7 pre-releases show support for CSS transitions which are very related to
CSS animation. It is quite likely that a form of this property using the
-moz
prefix
may be supported in a Firefox browser by the time you read this.
animation-delay
This property is used to define a delay before an animation starts.
Syntax
animation-delay:
time1
[,..
timeN
]
where
time
is a standard CSS time value like 2s or 4700ms. The default value is 0, meaning
the animation starts immediately.
Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
CSS Animations - animation-delay
</title>
<style type="text/css">
@-webkit-keyframes move {
from {width: 100px; height: 300px;
left: 0; top: 0;}
50% {width: 100px; height: 300px;
left: 300px; top: 0;}
to {width: 100px; height: 300px;
left: 300px; top: 300px;}
}
@-webkit-keyframes resize {
from {width: 100px; height: 300px;
left: 300px; top: 300px;}
50% {width: 100px; height: 100px;
left: 300px; top: 300px;}
to {width: 300px; height: 100px;
left: 300px; top: 300px;}
}
#anim1 {-webkit-animation-name:move, resize;
-webkit-animation-duration: 4s, 4s;
-webkit-animation-delay: 0s, 4s;
position:absolute;
background-color: purple;}
</style>
</head>
