Simple CSS Animation
Simple css Animation
This is the simple animation using css. So that, you can easily learn and also alter the design.
<html>
<head>
<style>
div {
width: 100px;
height: 25px;
background: red;
color:white;
text-align:center;
padding:5px;
border-radius:8px;
position: relative;
-webkit-animation: me 5s infinite;
}
@-webkit-keyframes me
{
from {left: 0px;}
to {left: 200px;}
}
/* above style coding copy then paste just change div name, animation name you and from, to pixels */
div2 {
width: 100px;
height: 25px;
background: green;
color:white;
text-align:center;
padding:5px;
border-radius:5px;
position: relative;
-webkit-animation: you 5s infinite;
}
@-webkit-keyframes you
{
from {left: 200px;}
to {left: 0px;}
}
</style>
</head>
<body>
</html>
This is the simple animation using css. So that, you can easily learn and also alter the design.
<html>
<head>
<style>
div {
width: 100px;
height: 25px;
background: red;
color:white;
text-align:center;
padding:5px;
border-radius:8px;
position: relative;
-webkit-animation: me 5s infinite;
}
@-webkit-keyframes me
{
from {left: 0px;}
to {left: 200px;}
}
/* above style coding copy then paste just change div name, animation name you and from, to pixels */
div2 {
width: 100px;
height: 25px;
background: green;
color:white;
text-align:center;
padding:5px;
border-radius:5px;
position: relative;
-webkit-animation: you 5s infinite;
}
@-webkit-keyframes you
{
from {left: 200px;}
to {left: 0px;}
}
</style>
</head>
<body>
</html>
