<!DOCTYPE html>
<header>
<meta charset="UTF-8">
<style>
.parent {
width: 1320px;
height: 600px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
filter: contrast(50);
}
.child1,.child2 {
width: 200px;
height: 200px;
background-color: #def515;
float: left;
border-radius: 50%;
filter: blur(25px);
}
.child1 {
animation: c1 0.8s ease-in-out infinite alternate;
}
.child2 {
animation: c2 0.8s ease-in-out infinite alternate;
}
@keyframes c1 {
from {transform: translateX(-30px);}
to {transform: translateX(25px);}
}
@keyframes c2 {
from {transform: translateX(30px);}
to {transform: translateX(-25px);}
}
</style>
</header>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>
