1Read this helpful, short and straightforward article to learn CSS animation perfectly.
2
3https://medium.com/@Cafe_Code/learn-css-animation-asap-as-simple-as-possible-374b7874d4dd
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5div {
6 width: 100px;
7 height: 100px;
8 background-color: red;
9 position: relative;
10 animation: myfirst 5s linear 2s infinite alternate;
11}
12@keyframes myfirst {
13 0% {background-color:red; left:0px; top:0px;}
14 25% {background-color:yellow; left:200px; top:0px;}
15 50% {background-color:blue; left:200px; top:200px;}
16 75% {background-color:green; left:0px; top:200px;}
17 100% {background-color:red; left:0px; top:0px;}
18}
19</style>
20</head>
21<body>
22
23<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
24
25<div><p>you can add text in this box or anithing else like a pictrue</p></div>
26
27</body>
28</html>
29
1<!-- For up Direction-->
2<marquee width="60%" direction="up" height="100px"></marquee>
3<!-- For Down Direction-->
4<marquee width="60%" direction="down" height="100px"></marquee>
5<!-- For Right Direction-->
6<marquee width="60%" direction="right" height="100px"></marquee>
7<!-- For Left Direction-->
8<marquee width="60%" direction="left" height="100px"></marquee>