Как закончить hover или в hover два раза изменить прозрачность?

Question

[WizardW]

Сначала кнопка с opacity: 1, под hover она должна стать 0.7 и затем через 0.3s (пользователь не убирает курсор с кнопки) opacity должна вернуться к единице. Как такое сделать на css?

Answer 1

[Шохрух Шаймардонов]

Гуглите про @keyframes в css3. Используйте в связке с transition.

Answer 2

[0xD34F]

.button:hover {
  animation: hover 2s linear;
}
@keyframes hover {
  0%, 50% {
    opacity: 0.5;
  },
  100% {
    opactity: 1;
  }
}

https://codepen.io/anon/pen/mZVrxO?editors=1100