The @keyframes property specifies animation code. To use CSS3 animation we need to understand @keyframe property.
This @keyframe property enables user to do multiple transition on the same property which is later performed in continuous sequence. This animation can be run infinite number of time but a user can resume or pause animation as according to his requirement. Basically a simple animation have just two keyframes i.e Start and End, while the complex animation have multiple keyframes.
CSS Syntax:
<style>
@keyframes'name'{
keyframe{property:value;}
}
</style>
Source Code:
<html>
<head>
<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%
}
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 Point</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>
For Output:
User can go through this link https://jsfiddle.net/mvfesh8m/
0 Comment(s)