CSS3
February 15, 2021
⑪ Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode
Продолжим изучение темы CSS3 - анимация. Если пропустили прошлые статьи, то вот ссылки на них:
- ① Введение в CSS3-анимацию
- ② Ключевые кадры
- ③ Временная функция для ключевых кадров
- ④ Название анимации: свойство animation-name
- ⑤ Продолжительность анимации: свойство animation-duration
- ⑥ Временная функция: свойство animation-timing-function
- ⑦ Повтор анимации: свойство animation-iteration-count
- ⑧ Направление анимации: свойство animation-direction
- ⑨ Проигрывание анимации: свойство animation-play-state
- ⑩ Задержка анимации: свойство animation-delay
Свойство animation-fill-mode
определяет, какие значения применяются анимацией вне времени ее выполнения. Когда анимация завершается, элемент возвращается к своим исходным стилям. По умолчанию анимация не влияет на значения свойств animation-name
и animation-delay
, когда анимация применяется к элементу. Кроме того, по умолчанию анимация не влияет на значения свойств animation-duration
и animation-iteration-count
после ее завершения. Свойство animation-fill-mode
может переопределить это поведение.
Свойство не наследуется.
animation-fill-mode
Значения:
none
- Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации.forwards
- После того, как анимация заканчивается (как определено значениемanimation-iteration-count
), анимация будет применять значения свойств к моменту окончания анимации. Еслиanimation-iteration-count
больше нуля, применяются значения для конца последней завершенной итерации анимации (а не значения для начала итерации, которое будет следующим). Если значениеanimation-iteration-count
равно нулю, применяемыми значениями будут те, которые начнут первую итерацию (так же, как и в режимеanimation-fill-mode: backwards;
).backwards
- В течение периода, определенного с помощьюanimation-delay
, анимация будет применять значения свойств, определенные в ключевом кадре, которые начнут первую итерацию анимации. Это либо значения ключевого кадраfrom
(когдаanimation-direction: normal
илиanimation-direction: alternate
), либо значения ключевого кадраto
(когдаanimation-direction: reverse
илиanimation-direction: alternate
).both
- Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации.
Синтаксис
CSS
animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;
HTML
<section> <div class="container"> <kbd>animation-fill-mode: forwards;</kbd> <ul> <li></li> <li></li> <li></li> </ul> </div> <div class="container1"> <kbd>animation-fill-mode: backwards;</kbd> <ul> <li></li> <li></li> <li></li> </ul> </div> <div class="container2"> <kbd>animation-fill-mode: <br>both;</kbd> <ul> <li></li> <li></li> <li></li> </ul> </div> <footer><p>Обновите страницу или нажмите кнопку RERUN, чтобы просмотреть анимацию</p></footer> </section>
CSS
body { margin: 0; background-image: linear-gradient(-45deg, transparent 50%, #E8E8E4 50%, #E8E8E4 55%, transparent 55%), linear-gradient(-45deg, #E8E8E4 5%, transparent 5%); background-color: #FEFFFE; background-size: 1em 1em; } kbd { display: block; } section { width: 660px; margin: 0 auto; overflow: hidden; } .container, .container1, .container2 { padding: 30px 0 20px; width: 210px; text-align: center; float: left; } ul { list-style: none; padding: 10px; display: inline-block; background: #3C4147; border-radius: 10px; box-shadow: inset 2px 2px 5px rgba(0,0,0,.7), 2px 2px 1px #3C4147; } li { width: 30px; height: 30px; border-radius: 50%; background: black; box-shadow: inset 2px 2px 4px rgba(0,0,0,.4), inset -2px -2px 4px rgba(255,255,255,.6); } @keyframes traffic { 100%{background: #FB000D;} } @keyframes traffic1 { 100%{background: #FED21D;} } @keyframes traffic2 { 100%{background: #7DFA04;} } li:nth-of-type(1) { margin-bottom:5px; animation: traffic 2s forwards; } li:nth-of-type(2) { margin-bottom: 5px; animation: traffic1 2s forwards 2s; } li:nth-of-type(3) { animation: traffic2 2s forwards 4s; } .container1 li:nth-of-type(1) { margin-bottom:5px; animation: traffic 2s backwards; } .container1 li:nth-of-type(2) { margin-bottom: 5px; animation: traffic1 2s backwards 2s; } .container1 li:nth-of-type(3) { animation: traffic2 2s backwards 4s; } .container2 li:nth-of-type(1) { margin-bottom:5px; animation: traffic 2s both; } .container2 li:nth-of-type(2) { margin-bottom: 5px; animation: traffic1 2s both 2s; } .container3 li:nth-of-type(3) { animation: traffic2 2s both 4s; } footer { clear: both; text-align: center; padding: 20px 0; font: 14px/1.5 arial; background: #C8C2B7; border-top: 3px solid #6D6D6D; color: #6D6D6D; } p{ margin:0 }
Продолжение в следующей статье!