My image is currently animating along a path, but I want to make the path itself visible. Here's the CSS code:
div {
width:10px;
height:10px;
background:red;
position:relative;
-webkit-animation-name:Player1;
-webkit-animation-duration:100s;
-webkit-animation-timing-function:cubic-bezier(0.1,0.1,0.1,0.1);
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:5;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running
}
@-webkit-keyframes Player1 {
0% {
background:red;
left:20px;
top:20px
}
25% {
background:#ff0;
left:800px;
top:200px
}
50% {
background:blue;
left:950px;
top:500px
}
75% {
background:green;
left:0;
top:800px
}
100% {
background:red;
left:0;
top:0
}
}
This is the HTML code for the animation:
<div></div>If you'd like to create a line connecting them using only CSS code, let me know and I can help with that!
You can view the fiddle here.