css - 动画没有缓和

Question

我有这样的代码，不知何故 ease-out 似乎不起作用。 animation 属性是否有任何阻止它工作的东西？

.fade-in-header-button
    opacity: 0
    animation: slideInFromBottom .25s ease-out .25s 1 forwards

  @keyframes slideInFromBottom
    0%
      opacity: 0
      transform: translateY(150%)
    100%
      opacity: 1
      transform: translateY(0)

Answer 1

试试这个演示。

使 CSS 正确格式化..

带有分栏和方括号(; 和 {})。

.fade-in-header-button{
  border:none;
  padding:10px 20px;
  background:#00cc00;
  color:#fff;
  opacity: 0;
  animation: slideInFromBottom .25s ease-out .25s 1 forwards;
}
@keyframes slideInFromBottom{
  0%{
    opacity: 0;
    transform: translateY(150%);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}

<button class="fade-in-header-button">Slide In From Bottom</button>

关于 ease-out, ease-in and ease-in-out