动画并不轻松

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>

关于轻松输出、轻松输入和轻松输出