#html #css #animation #css-animations
Вопрос:
Как я могу приостановить/воспроизвести анимацию смены сцены, используя свойство animation-play-state в CSS (НЕ JS), при нажатии на кнопку? Все, что я нахожу в Интернете, — это щелчок по одному и тому же элементу или родительскому элементу этого элемента, а не по двум отдельным элементам.
lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="utf-8"gt; lt;/headgt; lt;bodygt; lt;button class="button" id="start"gt;play/pauselt;/buttongt; lt;div id="stage"gt;lt;/divgt; lt;/bodygt; lt;/htmlgt; #stage { height:300px; border:1px solid #000; animation:stage-change 6s 6 forwards; overflow: hidden; } @keyframes stage-change { 0% { background-color: darkorange ; } 100% { background-color: #1c1341; } } Ответ №1:
Вы можете использовать ~ для изменения свойств изменения css родственного элемента.
Предполагая, что вы хотите полностью сделать это в css, вы не можете заставить кнопку воспроизводиться и приостанавливаться одновременно, вы можете использовать JS для одной кнопки.
Я сделал это с помощью 2 кнопок здесь, одна кнопка для воспроизведения и одна для приостановки.
HTML
lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="utf-8"gt; lt;/headgt; lt;bodygt; lt;button class="button" id="play"gt;playlt;/buttongt; lt;button class="button" id="pause"gt;pauselt;/buttongt; lt;div id="stage"gt;lt;/divgt; lt;/bodygt; lt;/htmlgt; CSS
#stage{ height:300px; border:1px solid #000; overflow: hidden; animation: stage-change 6s 6 forwards; animation-play-state: paused; } @keyframes stage-change { 0% { background-color: darkorange ; } 100% { background-color: #1c1341; } } #play:focus ~ #stage{ animation-play-state: running; } #pause:focus ~ #stage{ animation-play-state: paused; } или
Вы можете использовать взлом флажка, если вы действительно хотите использовать только один элемент ввода для управления анимацией.
HTML
lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="utf-8"gt; lt;/headgt; lt;bodygt; lt;input type="checkbox" id="check"gt; play lt;div id="stage"gt;lt;/divgt; lt;/bodygt; lt;/htmlgt; CSS
#stage{ height:300px; border:1px solid #000; overflow: hidden; animation: stage-change 6s 6 forwards; animation-play-state: paused; } @keyframes stage-change { 0% { background-color: darkorange ; } 100% { background-color: #1c1341; } } #play:checked ~ #stage{ animation-play-state: running; } Ответ №2:
Если вы замените кнопку флажком и установите стили, как для кнопки, то вы сможете реализовать свою задачу:
/* Styling for the button */ .button { display: inline-block; padding: 2px 7px; border: 1px solid #767676; border-radius: 3px; box-sizing: border-box; font: normal 13.3333px sans-serif; background-color: #efefef; user-select: none; } .button:hover { border-color: #474747; background-color: #e3e3e3; } .button:active { border-color: #8c8c8c; background-color: #f5f5f5; } /* Control element */ #start { position: absolute; height: 1px; width: 1px; opacity: 0; pointer-events: none; } /* Controllable element */ #stage { height: 300px; border: 1px solid #000; animation: stage-change 6s 6 forwards paused; } #start:checked #stage { animation-play-state: running; } /* Animation */ @keyframes stage-change { 0% { background-color: darkorange; } 100% { background-color: #1c1341; } } lt;label for="start" class="button"gt;play/pauselt;/labelgt; lt;input id="start" type="checkbox"gt; lt;div id="stage"gt;lt;/divgt; Стили можно упростить, используя реальную кнопку в разметке:
/* Button */ .button { pointer-events: none; } /* Control element */ #start { position: absolute; height: 1px; width: 1px; opacity: 0; pointer-events: none; } /* Controllable element */ #stage { height: 300px; border: 1px solid #000; animation: stage-change 6s 6 forwards paused; } #start:checked #stage { animation-play-state: running; } /* Animation */ @keyframes stage-change { 0% { background-color: darkorange; } 100% { background-color: #1c1341; } } lt;label for="start"gt;lt;button class="button"gt;play/pauselt;/buttongt;lt;/labelgt; lt;input id="start" type="checkbox"gt; lt;div id="stage"gt;lt;/divgt; Или вы можете еще больше расширить функциональность — метки на кнопке изменятся:
/* Styling for the button */ .button { display: inline-block; padding: 2px 7px; border: 1px solid #767676; border-radius: 3px; box-sizing: border-box; font: normal 13.3333px sans-serif; background-color: #efefef; user-select: none; } .button:hover { border-color: #474747; background-color: #e3e3e3; } .button:active { border-color: #8c8c8c; background-color: #f5f5f5; } .button::before { content: 'play'; } #start:checked .button::before { content: 'pause'; } /* Control element */ #start { position: absolute; height: 1px; width: 1px; opacity: 0; pointer-events: none; } /* Controllable element */ #stage { height: 300px; border: 1px solid #000; animation: stage-change 6s 6 forwards paused; } #start:checked label #stage { animation-play-state: running; } /* Animation */ @keyframes stage-change { 0% { background-color: darkorange; } 100% { background-color: #1c1341; } } lt;input id="start" type="checkbox"gt; lt;label for="start" class="button"gt;lt;/labelgt; lt;div id="stage"gt;lt;/divgt;