Свойство - Animation-fill-mode

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);
  }
}