ICT Solutions
22 Jun 2022, 18:03:21
Category : JavaScript Tutorials
JS Animation
<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
#mySlide{
position: relative;
}
li{
position: relative;
list-style: none;
display: block;
float: left;
padding: 0px 10%;
width: auto;
}
@keyframes mymove{
from { left: 0px; }
to { left: 100%; }
}
@-webkit-keyframes{
from { left: 0px; }
to { left: 100%; }
}
</style>
</head>
<body onload = "jsFun()">
<div id = "mySlide">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</div>
<script>
var x = document.getElementsByTagName("LI");
function jsFun(){
for(i = 0; i < x.length; i++){
x[i].style.animation = "20s 5 mymove";
}
}
</script>
</body>
</html>
Comments:
No comment to show.