Здравствуйте!
Есть ли возможность остановить анимацию css с той позиции, когда нажата кнопка Pause и снова запустить с места остановки
На данный момент при checked Pause - анимация сбрасывается
Решение на javascript есть. Хотелось бы решение на css.
Код Fiddle
#play {
display: none;
}
#play+label[for=play] {
display: inline-block;
color: #fff;
cursor: pointer;
font-size: 13px;
z-index: 99;
padding: 5px;
background: #37A000;
margin-bottom: 15px;
}
#play+label[for=play]>span:nth-of-type(2),
#play:checked+label[for=play]>span:nth-of-type(1) {
display: none;
}
#play:checked+label[for=play] {
background: tomato;
}
#play:checked+label[for=play]>span:nth-of-type(2) {
display: block;
}
.progress {
height: 15px;
background: #555;
position: relative;
}
.progress:after {
width: 0;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #37A000;
animation-play-state: paused;
}
#play:checked+label[for=play]~.progress:after {
animation: animProgress 7s linear infinite;
}
@keyframes animProgress {
100% {
width: 100%;
}
}
Ответ
Лови.
#play {
display: none;
}
#play + label[for=play] {
display: inline-block;
color: #fff;
cursor: pointer;
font-size: 13px;
z-index: 99;
padding: 5px;
background: #37A000;
margin-bottom: 15px;
}
#play + label[for=play] > span:nth-of-type(2),
#play:checked + label[for=play] > span:nth-of-type(1) {
display: none;
}
#play:checked + label[for=play] {
background: tomato;
}
#play:checked + label[for=play] > span:nth-of-type(2) {
display: block;
}
.progress {
height: 15px;
background: #555;
position: relative;
}
.progress:after {
width: 0;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #37A000;
animation: animProgress 7s linear 1;
animation-fill-mode: forwards;
}
#play ~ .progress:after {
animation-play-state: paused;
}
#play:checked ~ .progress:after {
animation: animProgress 7s linear 1;
animation-fill-mode: forwards;
}
@keyframes animProgress {
from {
width: 0
}
to {
width: 100%
}
}
p.s. В примере выставил один цикл.
Комментариев нет:
Отправить комментарий