Scribd
Upload
120 views

Css3 Animation

CSS3 animation allows creating motion and changing shapes using keyframes. Keyframes control intermediate animation steps and attributes like colors, sizes, positions can be set across keyframes. Examples demonstrate left sliding animations using keyframes to change width, margin-left from one value to another over the animation duration.

Uploaded by

Sharth Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
120 views

Css3 Animation

CSS3 animation allows creating motion and changing shapes using keyframes. Keyframes control intermediate animation steps and attributes like colors, sizes, positions can be set across keyframes. Examples demonstrate left sliding animations using keyframes to change width, margin-left from one value to another over the animation duration.

Uploaded by

Sharth Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS3 - ANIMATION

http://www.tutorialspoint.com/css/css3_animation.htm Copyright tutorialspoint.com

Animation is process of making shape changes and creating motions with elements.

@keyframes
Keyframes will control the intermediate animation steps in CSS3.

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;
}

The above example shows height, width, color, name and duration of animation with keyframes
syntax

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>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>

It will produce the following result

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>Tutorials Point</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>

It will produce the following result

You might also like