CSS Property: animation
[this page | pdf | back links]
The CSS (CSS3) animation property is a shorthand
property combining (up to) 8 of the animation properties. N.B. Always specify a
non-zero animation-duration
property as otherwise the duration will be set to zero and the animation will
in effect not play.
Valid property values (other
than inherit and initial) are defined
by the elements of the shorthand. Shorthand elements (in the order in which
they appear):
-
animation-name
-
animation-duration
-
animation-timing-function
-
animation-delay
-
animation-iteration-count
-
animation-direction
-
animation-fill-mode
-
animation-play-state
|
Default Value:
|
See individual
properties
|
|
JavaScript syntax:
|
e.g. object.style.animation = "mymovie 5s
infinite";
|
|
Inherited:
|
No
|
|
Animatable:
|
No
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
div {width: 100px; height: 40px; position: relative;
background: yellow;}
div.x1 {animation: anim 2s infinite}
@keyframes anim {from {left: 0px} to {left: 50px;} }
</style>
</head>
<body>
1. Element set using in-file HTML style<br>
<div class="x1"> </div><br><br>
2. Element set using JavaScript<br>
<div id="x2"> </div>
<script>
document.getElementById("x2").style.animation = "anim 2s infinite";
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedCSSPropertyAnimation() {
var x = document.createElement("DIV"); x.style.animation = "anim 2s infinite"; return (window.getComputedStyle(x, null).animation == "anim 2s infinite");
} |
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties