动画没有缓和答案

【问题标题】：Animation is not eased-out动画没有缓和
【发布时间】：2021-01-04 13:48:13
【问题描述】：

我有这样的代码，不知何故 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)

【问题讨论】：

标签： css sass css-animations css-transitions

【解决方案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);
  }
}

&lt;button class="fade-in-header-button"&gt;Slide In From Bottom&lt;/button&gt;

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

【讨论】：

你想要这样吗？如果有任何变化，我也很乐意改变答案。顺便说一句谢谢:)
这仍然是linear 我希望它是ease-outed :) 我寻找流畅的动画。我也使用.sass 格式——这就是为什么我没有; 也没有{}。
还是没有运气：/
您可以尝试像this image一样更改缓出效果，点击圆圈以根据需要更改动画。