Animation CSS3 की एक ऐसी Property है जिसका उपयोग Flash या किसी और अन्य Animation Application के उपयोग के बिना Object को Animate करने के लिए किया जाता है. CSS3 के इस Feature के साथ आप Object को एक Style मे एक Animated तरीके से बदल सकते है.
यह धीरे-धीरे किसी Object Style को दूसरे Style में बदलता है और यह पूरा Animation CSS3 के साथ Keyframes Declared करने पर निर्भर करता है.
Animation Process मे परिवर्तन और Elements के साथ Speed बनाने की भी प्रक्रिया होती है.
<!DOCTYPE html>
<html>
<head>
<title>Example of Moving Left Animation</title>
<style>
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials root</h1>
<p>This is an example of moving left animation</p>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Moving left animation with keyframes</title>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Tutorials root</h1>
<p>Animation left with an extra keyframe to make text changes.</p>
<button onclick="myFunction()">Reload page</button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>