<!DOCTYPE html>
<html>
<head>
<style>
#frameDiv {
height: 200px;
width: 200px;
border: solid black 1px;
margin: 10px;
background-color: rgb(222, 255, 244);
position: relative;
overflow: hidden;
}
#lineDiv {
position: absolute;
width: 100%;
left: 0;
top: 100px;
height: 0px;
border: dashed 2px black;
transform-origin: 50%;
rotate: -45deg;
animation: moveLine alternate ease-in-out 3s 4;
}
@keyframes moveLine {
100% { rotate: 45deg;}
}
#pinkDiv {
width: 20px;
height: 20px;
border-radius: 25%;
background-color: hotpink;
position: absolute;
z-index: 1;
offset-path: path('M20 180 L180 20');
stroke-width: 2px;
stroke: black;
animation: movePinkDiv alternate ease-in-out 3s 4;