我有这样的代码,不知何故 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 正确格式化..
带有分栏和方括号(;
和 {}
)。
.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>
关于css - 动画没有缓和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63941899/