⑨ Проигрывание анимации: свойство animation-play-state

Продолжим изучение темы CSS3 - анимация. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Введение в CSS3-анимацию
• ② Ключевые кадры
• ③ Временная функция для ключевых кадров
• ④ Название анимации: свойство animation-name
• ⑤ Продолжительность анимации: свойство animation-duration
• ⑥ Временная функция: свойство animation-timing-function
• ⑦ Повтор анимации: свойство animation-iteration-count
• ⑧ Направление анимации: свойство animation-direction

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

Свойство не наследуется.

animation-play-state

Значения:

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

Синтаксис

CSS

animation-play-state: running;
animation-play-state: paused;
animation-play-state: paused, running, running;
animation-play-state: initial;
animation-play-state: inherit;

HTML

<div class="container">
  <div class="clock">
    <div class="clock-inner">
      <div class="clock-minutes"></div>
    <ul class="clock-numbers">
						<li>XII</li>
						<li>III</li>
						<li>VI</li>
						<li>IX</li>
					</ul></div>
  </div>
  <h3>hover to pause</h3>
</div>

CSS

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;
}

Продолжение в следующей статье!