动画没有缓和

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 正确格式化..

带 semi-column 和方括号（; 和 {}）。

.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

动画没有缓和

Animation is not eased-out

css

sass

css-transitions

css-animations