Дата публикации: 31.01.18
Свойство - Animation-play-state
Статья Рейчел Коуп с моими дополнениями (2014-2016). Несмотря на давность - актуальная во все времена. Animation-play-stateAnimation-play-state
animation-play-state:
позволяет задать состояние анимации: она проигрывается или стоит на паузе.
Возобновление приостановленной анимации запускает анимацию, с того момента, когда она была остановлена.
Возможные значения:
playing
анимация воспроизводится прямо сейчас.paused
анимация приостановлена.
Пример:
.div:hover { animation-play-state: paused; }
Чтобы добавить несколько анимаций в селектор, вы просто разделяете значения запятой. Синтаксис для воспроизведения нескольких анимаций:
.div { animation: slideIn 2s, rotate 1.75s; }
В целом синтаксис следующий (css):
.clock { align-items:center; border-radius: 50%; border: solid 25px DarkTurquoise; display:flex; height: 200px; justify-content:center; margin: 80px auto 0; width: 200px; margin: 80px auto 0; &:after { border-radius: 50%; border: solid 15px DarkTurquoise; content: ""; height: 20px; left: 50%; margin-left: -26px; position: absolute; top: 45px; width: 20px; } } .hand { align-items:center; background: DarkTurquoise; border-radius: 50%; display:flex; height: 20px; justify-content:center; width: 20px; z-index: 2; } .clock:hover .hand:after { animation-play-state: paused; -webkit-animation-play-state: paused; cursor: pointer; } .hand:after { content: ''; height: 80px; width: 8px; background: DarkTurquoise; border-radius: 4px; top: -40px; position: relative; -webkit-animation: timer 4s linear infinite; animation: timer 4s linear infinite; transform-origin: 48% 100%; -webkit-transform-origin: 48% 100%; animation-play-state: paused; -webkit-animation-play-state: running; } .h1 { color: DarkTurquoise; font-family: lato; font-size: 20px; padding-top: 40px; text-align: center; text-transform: uppercase; } @-webkit-keyframes timer { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes timer { 0% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
Наведите курсором на стрелку часов