highlight different parts of your content but don't overdo it can be very annoying.
-->EXCELLENCE<--
<div id="text1">A demonstration of excellence</div><div class="point"></div>
/**start*********creating focus animation point ****/
.point {background: gold; position: relative; z-index: 10; width: 20px; height: 20px; border-radius: 10px;
animation: point 15s linear 2s infinite;
}
@keyframes point {
0% {position: absolute; top: 50px; left: 0px; width: 20px;} /**starting point**/
5% {position: absolute; top: 50px; left: 0px; width: 20px;} /**wait a kuttke**/
6% {position: absolute; top: -300px; left: 0px; width: 20px;} /**up to title**/
12% {position: absolute; top: -300px; left: 0px; width: 300px;} /**expand halfway along title**/
16% {position: absolute; top: -300px; left: 400px; width: 20px;} /**Finish title return to dot**/
20% {position: absolute; top: -180px; left: 50px; height: 20px;} /**drop down to first menu item**/
21% {position: absolute; top: -180px; left: 100px; height: 80px;}/**point to first item**/
22% {position: absolute; top: -180px; left: 150px; height: 20px;}/**return to dot move to next item**/
23% {position: absolute; top: -180px; left: 200px; height: 80px;}/**point to next item**/
24% {position: absolute; top: -180px; left: 250px; height: 20px;}/**return to dot move to next item**/
25% {position: absolute; top: -180px; left: 300px; height: 80px;}/**point to next item**/
26% {position: absolute; top: -180px; left: 350px; height: 20px;}/**return to dot move to next item**/
27% {position: absolute; top: -180px; left: 400px; height: 80px;}/**point to next item**/
28% {position: absolute; top: -180px; left: 450px; height: 20px;}/**return to dot move to next item**/
29% {position: absolute; top: -180px; left: 500px; height: 80px;}/**point to next item**/
30% {position: absolute; top: -180px; left: 550px; height: 20px;}/**return to dot move to next item**/
31% {position: absolute; top: -180px; left: 600px; height: 80px;}/**point to next item**/
32% {position: absolute; top: -180px; left: 650px; height: 20px; width: 20px;}/**return to dot move to next item**/
46% {position: absolute; top: 50px; left: 450px; width: 20px;} /**underline main heading from end to start**/
90% {position: absolute; top: 50px; left: 0px; width: 400px;} /**underline main heading**/
100% {position: absolute; top: 50px; left: 0px; width: 20px;} /**underline main heading**/
}
/**end*********creating focus animation point ****/
.point {background: gold; position: relative; z-index: 10; width: 20px; height: 20px; border-radius: 10px;
animation: point 15s linear 2s infinite;
}
@keyframes point {
0% {position: absolute; top: 50px; left: 0px; width: 20px;} /**starting point**/
5% {position: absolute; top: 50px; left: 0px; width: 20px;} /**wait a kuttke**/
6% {position: absolute; top: -300px; left: 0px; width: 20px;} /**up to title**/
12% {position: absolute; top: -300px; left: 0px; width: 300px;} /**expand halfway along title**/
16% {position: absolute; top: -300px; left: 400px; width: 20px;} /**Finish title return to dot**/
20% {position: absolute; top: -180px; left: 50px; height: 20px;} /**drop down to first menu item**/
21% {position: absolute; top: -180px; left: 100px; height: 80px;}/**point to first item**/
22% {position: absolute; top: -180px; left: 150px; height: 20px;}/**return to dot move to next item**/
23% {position: absolute; top: -180px; left: 200px; height: 80px;}/**point to next item**/
24% {position: absolute; top: -180px; left: 250px; height: 20px;}/**return to dot move to next item**/
25% {position: absolute; top: -180px; left: 300px; height: 80px;}/**point to next item**/
26% {position: absolute; top: -180px; left: 350px; height: 20px;}/**return to dot move to next item**/
27% {position: absolute; top: -180px; left: 400px; height: 80px;}/**point to next item**/
28% {position: absolute; top: -180px; left: 450px; height: 20px;}/**return to dot move to next item**/
29% {position: absolute; top: -180px; left: 500px; height: 80px;}/**point to next item**/
30% {position: absolute; top: -180px; left: 550px; height: 20px;}/**return to dot move to next item**/
31% {position: absolute; top: -180px; left: 600px; height: 80px;}/**point to next item**/
32% {position: absolute; top: -180px; left: 650px; height: 20px; width: 20px;}/**return to dot move to next item**/
46% {position: absolute; top: 50px; left: 450px; width: 20px;} /**underline main heading from end to start**/
90% {position: absolute; top: 50px; left: 0px; width: 400px;} /**underline main heading**/
100% {position: absolute; top: 50px; left: 0px; width: 20px;} /**underline main heading**/
}
/**end*********creating focus animation point ****/
