Я нович в html/css так, что прошу не судить строго. Я написал код в css. При котором при наведении на контейнер, должна проигрываться анимация. но проблема в том что одна часть анимации(то есть квадрат который вращается по рамке) проигрывается, а другой нет. Прошу помочь.
@font-face {
font-family: Taurus;
src: url(Fonts\taurusnormal.ttf);
}
h1 {
color: rgb(202, 202, 202);
font-family: Taurus;
font-size: 30pt;
}
a {
text-decoration: none;
color: black;
}
.panel-1 {
position: fixed;
top: 0px;
margin-left: 0pt;
width: 450pt;
height: 35pt;
background: rgb(187, 181, 181);
}
.panel-font {
font-size: 17pt;
color: black;
padding: 10px 17px;
border: 1px solid gray;
}
table {
border-collapse: collapse;
height: 35pt;
width: 450pt;
padding: 0;
}
div.spisok {
margin-left: 10pt;
color: rgb(92, 24, 24);
font-size: 120%;
White-space: pre-line;
font-family: Times New Roman;
}
div.text {
font-family: Comic Sans MS;
color: rgb(134, 87, 172);
margin-left: 15mm;
font-size: 120%;
White-space: pre-line;
}
li {
color: rgb(15, 146, 107);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: black;
}
.container1 {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container1 .pup {
position: relative;
height: 100px;
width: 100px;
margin: -110px;
border: 3px solid green;
}
.container1 .pup:nth-child(1) {
border: 3px solid wheat;
width: 220px;
height: 100px;
}
.container1 .pup:nth-child(2) {
border: 3px solid transparent;
width: 220px;
height: 100px;
}
.container1 .pup:nth-child(1):hover:after {
content: '';
position: absolute;
top: -1px;
right: -5px;
width: 10px;
height: 10px;
background: #c7a424;
box-shadow: 0 0 0 5px #c7a42425, 0 0 0 7px #c7a42415, 0 0 0 10px #c7a42410, 0 0 20px #c7a424, 0 0 50px #c7a424;
animation: animation1 7s infinite;
animation-play-state: running;
}
.container1 .pup:nth-child(2):hover:after {
content: '';
position: absolute;
top: 90px;
left: -5px;
width: 10px;
height: 10px;
background: #c7a424;
box-shadow: 0 0 0 5px #c7a42410, 0 0 0 7px #c7a42410, 0 0 0 10px #c7a42410, 0 0 20px #c7a424, 0 0 50px #c7a424;
animation: animation2 7s infinite;
animation-play-state: running;
}
@keyframes animation1 {
0% {
position: absolute;
right: -5px;
top: -7px;
}
25% {
right: 210px;
top: -7px
}
50% {
right: 210px;
top: 90px;
}
75% {
right: -5px;
top: 90px;
}
100% {
right: -5px;
top: -7px
}
}
@keyframes animation2 {
0% {
position: absolute;
left: -5px;
top: 90px;
}
25% {
left: 210px;
top: 90px;
}
50% {
left: 210px;
top: -7px;
}
75% {
left: -5px;
top: -7px;
}
100% {
left: -5px;
top: 90px;
}
}
<div class="panel-1">
<table>
<tr widht="500pt">
<td class="panel-font"><a href="Animation-1.html">Анимации-1</a></td>
<td class="panel-font"><a href="Animation-2.html">Анимации-2</a></td>
<td class="panel-font"><a href="Animation-3.html">Анимации-3</a></td>
<td class="panel-font"><a href="Spravka.html">Справка</a></td>
</tr>
</table>
</div>
<div class="container1">
<div class="pup"></div>
<div class="pup"></div>
</div>