<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
html, body {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 30px 0;
border-radius: 50%;
animation-name: pulse;
}
.element-one {
background-color: #1c87c9;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.element-two {
margin: 0;
background-color: #83bf42;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes pulse {
0% { left: 0; }
50% { left: 50%; }
100% { left: 0; }
}
</style>
</head>
<body>