CSS-3 Animations enables better editing options. An animation lets an element gradually change from one style to another. You can change as many CSS properties as you want to, as many times you want to.
Animation Properties
The animation-timing-function specifies the speed curve of an animation in CSS3 animations. It can have the following values:
(1) ease
It specifies an animation with a slow start, then fast, then end slowly (this is default).
(2) linear
It specifies an animation with the same speed from start to end.
(3) ease-in
It specifies an animation with a slow start.
(4) ease-out
It specifies an animation with a slow end.
(5) ease-in-out
It specifies an animation with a slow start and end.
(6) cubic-bezier(n,n,n,n)
It lets you define your own values in a cubic-bezier function.
@key frames
@Key frames hold the styles the element will have at certain times.
Example of key frames with left animation
@keyframes animation {
from {background-color: pink;}
to {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
}
Moving left animation
<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>Edusite</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>
Moving left animation with keyframes
<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%
}
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>Edusite</h1>
<p>This is an example of 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>
Recommended Posts: