Самостоятельная работа по веб-программирование Саидов Сарварбек Принял: Хожамуратов Бекмурод

7. Проигрывание анимации: свойство animation-play-state
Свойство animation-play-state определяет, будет ли анимация запущена или приостановлена. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние :hover.
Свойство не наследуется.

animation-play-state
Значения:
running	Анимация выполняется. Значение по умолчанию.
paused	Анимация приостанавливается. При перезапуске анимация начинается с того места, где она была остановлена, как если бы «часы», управляющие анимацией, остановились и снова запустились. Если анимация остановлена во время задержки, при повторном воспроизведении время задержки также возобновляется.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис
animation-play-state: running;
animation-play-state: paused;
animation-play-state: paused, running, running;
animation-play-state: initial;
animation-play-state: inherit;

body {
margin: 0;
background-color: white;
background-image: radial-gradient(#FFAE38 2px, transparent 1px);
background-size: 20px 20px;
}
.container {
height: 200px;
width: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
}
.clock {
background: #BDD0D7;
border-radius: 25px;
box-shadow: 6px 6px 0 #ABBABF;
height: 200px;
width: 200px;
position: relative;
}
.clock-inner {
background: #f9f9f9;
border-radius: 50%;
width: 160px;
height: 160px;
position: absolute;
left: calc(50% - 80px);
top: calc(50% - 80px);
box-shadow: inset 2px 2px 4px rgba(0,0,0,.3), inset -2px -2px 4px rgba(0,0,0,.3);
}
.clock-numbers {
padding-left: 0;
height: 120px;
width: 120px;
position: absolute;
left: calc(50% - 60px);
top: calc(50% - 60px);
list-style: none;
margin: 0;
}
.clock-numbers li {
height: 20px;
width: 20px;
line-height: 20px;
margin: -10px;
position: absolute;
text-align: center;
font-family: 'Special Elite', cursive;
text-shadow: 1px 1px 2px rgba(0,0,0,.3);
color: #544E3E;
font-weight: bold;
}
.clock-numbers li:nth-child(1) {
left: 50%;
top: 0;
}
.clock-numbers li:nth-child(2) {
right: 0;
top: 50%;
}
.clock-numbers li:nth-child(3) {
bottom: 0;
left: 50%;
}
.clock-numbers li:nth-child(4) {
left: 0;
top: 50%;
}
.clock-minutes {
height: 60px;
width: 2px;
background: #D56851;
border-radius: 2px;
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 1px);
-webkit-transform-origin: 1px 60px;
transform-origin: 1px 60px;
-webkit-animation: clock 60s steps(60, end) infinite;
-moz-animation: clock 60s steps(60, end) infinite;
animation: clock 60s steps(60, end) infinite;
box-shadow: 1px 1px 2px rgba(0,0,0,.3);
}
.clock:hover .clock-minutes{
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.clock-minutes:before {
content: "";
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: #D56851;
box-shadow: 1px 1px 2px rgba(0,0,0,.3);
top: calc(100% - 4px);
left: calc(100% - 5px);
}
@-webkit-keyframes clock {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes clock {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@-keyframes clock {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
h3 {
text-align: center;
font-family: 'Special Elite', cursive;
text-transform: uppercase;
margin-top: 30px;

}