Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Свойства CSS
align-content align-items align-self animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-gap column-rule column-rule-color column-rule-style column-rule-width columns column-span column-width content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight height justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width min-height min-width opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right table-layout text-align text-decoration text-indent text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

animation-fill-mode

Поддержка браузерами

12.0+ 10.0+ 16.0+ 43.0+ 12.1+ 9.0+

Описание

CSS свойство animation-fill-mode определяет какие стили будут применяться к анимируемому элементу до запуска анимации и после её выполнения.

Значение по умолчанию: none
Применяется: ко всем элементам и псевдо-элементам ::before и ::after
Анимируется: нет
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.animationFillMode="forwards"

Синтаксис

animation-fill-mode: none|forwards|backwards|both;

Значения свойства

Значение Описание
backwards Как только анимация будет применена, на всё время задержки её запуска используются значения, определённые для позиции 0% её ключевого кадра.
forwards Как только анимация будет завершена, значения, определённые в последнем ключевом кадре, сохранятся до тех пор, пока стиль анимации не будет удалён из любого селектора, нацеленного на данный узел.
both Реализуются оба значения, и forwards и backwards, как только анимация будет завершена и перед тем как она будет запущена.
none Значение по умолчанию, не приводит ни к каким действиям или же удаляет любые действия, связанные с применением значений forwards и backwards.

Пример

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style type="text/css">
    .module {
      width: 150px;
      display: inline-block;
    }

    .wrapper {
      width: 100px;
      height: 100px;
      border-radius: 5px;
      border: 1px dashed grey;
      display: inline-block;
    }

    .element {
      width: 100px;
      height: 100px;
      border-radius: 5px;
      background-color: purple;
      transform-origin: bottom left;
    }

    .container:hover .element {
      animation-name: rotate;
      animation-duration: 1s;
      animation-timing-function: cubic-bezier(.18, 1.03, .5, 1.62);
    }

    .element-2 {
      animation-fill-mode: forwards;
    }

    .element-3 {
      animation-delay: 1s;
      animation-fill-mode: backwards;
    }

    .element-4 {
      animation-delay: 1s;
      animation-fill-mode: both;
    }

    @keyframes rotate {
      0% {
        background-color: orange;
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(90deg);
        background-color: #0099CC;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <p>
      Наведите курсор на область, чтобы применить анимацию к элементам.
    </p>
    <div class="module">
      <p><code>none</code></p>
      <div class="wrapper">
        <div class="element element-1"></div>
      </div>
    </div>
    <div class="module">
      <p><code>forwards</code></p>
      <div class="wrapper">
        <div class="element element-2"></div>
      </div>
    </div>
    <div class="module">
      <p><code>backwards</code></p>
      <div class="wrapper">
        <div class="element element-3"></div>
      </div>
    </div>
    <div class="module">
      <p><code>both</code></p>
      <div class="wrapper">
        <div class="element element-4"></div>
      </div>
    </div>
  </div>
</body>

</html>

Результат данного примера в окне браузера:

Наведите курсор на область, чтобы применить анимацию к элементам.

none

forwards

backwards

both

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen