Animation is not eased-out

user_2570350 0
Viewed 36

I have such code and somehow ease-out doesn't seem to work. Is there anything with animation property that prevents it from working?

.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-animations css-transitions sass css
1 Answers

Try this demo.

Make CSS to formatting properly..

with semi-column and brackets (; and {}).

.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>

About ease-out, ease-in and ease-in-out

user_133686580
Related