CSS animations defines how to move from one CSS style to another.
The following tables describes the animation properties:
Property | Description |
---|---|
animation-delay | Delay before the animation starts (CSS time value) |
animation-direction | whether to play backward on alternate cycles(normal/alternate) |
animation-duration | animation duration in CSS time value |
animation-iteration-count | animation iteration count in number |
animation-name | the name of the animation in string |
animation-play-state | paused and resumed (running/paused ) |
animation-timing-function | how intermediate animation values are calculated(ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier ) |
animation | Shorthand property. |
The format for the animation shorthand property is as follows:
animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count>
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
}
#id1 {
font-size: large;
border: medium solid black;
}
#id1:hover {
-webkit-animation-delay: 100ms;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: 'GrowShrink';
}
@-webkit-keyframes GrowShrink {
to {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
}
}
</style>
</head>
<body>
<p>
<span id="id1">CSS</span>
This is a test.
</p>
</body>
</html>
Home
HTML CSS Book
CSS
HTML CSS Book
CSS
Animations:
- CSS animations defines how to move from one CSS style to another.
- Reusing Key Frames
- Stopping and Starting Animations
Related: