Animation-fill-mode

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

animation-fill-mode переопределяет воспроизведение анимации со следующими возможными значениями:

  • backwards - воспроизведение перед анимацией (во время задержки анимации) стили исходного ключевого кадра (0%).  Применяется к элементу. 
  • forwards - воспроизведение после завершения анимации.  Стили, определенные в финальном ключевом кадре (100%).
  • both - воспроизведение анимации в обоих случаях.
  • normal (по умолчанию) - анимация не применяет никаких стилей к элементу до или после анимации.

Синтаксис CSS:

animation-fill-mode: forwards;

Синтаксис сокращения анимации (рекомендуется):

animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode];
animation:  bounceIn 2s ease-in-out 3s 3 forwards;

В целом синтаксис следующий (css):

.container_fill_mode {
  padding-bottom: 20px;
}

.container_fill_mode:hover .forward {
  cursor: pointer;
  -webkit-animation: scale 2s forwards;
  animation: scale 2s forwards;
}

.container_fill_mode:hover .normal {
  -webkit-animation: scale 2s;
  animation: scale 2s;
  cursor: pointer;
}

.forward {
  background: darkturquoise;
  border-radius: 5px;
  color: white;
  font-family: lato;
  font-weight: 200;
  font-size: 16px;
  margin: 25px auto 0;
  padding: 20px;
  text-align: center;
  width: 400px;
}

.normal {
  background: tomato;
  color: white;
  margin: 45px auto;
  border-radius: 5px;
  padding: 20px;
  font-family: lato;
  font-weight: 200;
  font-size: 16px;
  text-align: center;
  margin: 0 auto;
  width: 400px;
}

@-webkit-keyframes scale {
  0% {
    transform: scale(1);
    -webkit-transform: scale(-100px);
  }
  100% {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
  }
}
@keyframes scale {
  0% {
    transform: scale(1);
    -webkit-transform: scale(-100px);
  }
  100% {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
  }
}

Forwards

Кнопка увеличивается и останавливается после увеличения

Normal

Кнопка увеличивается и возвращается назад к первоначальному размеру

Последние статьи:

Анимация CSS для начинающих. Урок 1 - Keyframes, animation-timing-function, animation-delay

Человеческий мозг всегда обращает внимание на движущиеся объекты. Из-за этого естественного рефлекса добавление анимации на ваш сайт или приложение является мощным способом привлечения внимания пользователей к важным областям вашего продукта. ... читать далее
02.01.18

Возможно Вам будут интересны другие статьи из категорий:

Интересно, полезно? Поделитесь у себя:



comments powered by HyperComments