infinite left to right animation code example
Example 1: css animation left to right
//css code
#leftToRight{
animation: run ease 3s;
-webkit-animation: run ease 3s;
-moz-animation: run ease 3s;
-o-animation: run ease 3s;
-ms-animation: run ease 3s;
}
@keyframes run {
0% { margin-left: -98%;}
100%{ margin-left: 0%;}
}
@-moz-keyframes run {
0% { margin-left: -98%;}
100%{ margin-left: 0%;}
}
@-webkit-keyframes run {
0% { margin-left: -98%;}
100%{ margin-left: 0%;}
}
@-o-keyframes run {
0% { margin-left: -98%;}
100%{ margin-left: 0%;}
}
@-ms-keyframes run {
0% { margin-left: -98%;}
100%{ margin-left: 0%;}
}
//html code
<div id="leftToRight"></div>
Example 2: webkit animation
@-webkit-keyframes pulse {
0% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
-webkit-transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
-webkit-transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
-webkit-transform: scale(1.0) rotate(0deg);
}
}
.pulsedbox {
-webkit-animation-name: pulse;
-webkit-animation-duration: 4s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}