<div class="parent">
Parent element
<div class="element">Child element</div>
</div>
.parent {
border: 2px solid #0074d9;
color: #0074d9;
padding: 20px;
}
.element {
border: 1px dotted #000;
background-color: #eee;
padding: 20px;
color: #000;
position: relative;
margin-top: 10px;
animation: push ease 5s alternate infinite;
animation-delay: 1.5s;
}
@keyframes push {
0% {
left: 0;
top: 0;
}
50% {
left: -100px;
top: 100px;
}
100% {
top: 50px;
left: 50px;
}
}
body, html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.