CODEWITHSUNDEEP
htmlcssanimation
Sergei Basharov
Sergei Basharov

Reputation: 53850

Why does keyframe-based animation slow down in the end?

I have this simple loading indicator:

https://jsbin.com/putuloledu/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Load indicator slowing down</title>
</head>
<body>
  <style>
    .timeIndicator {
    height: 5px;
    width: 0;
    background: #12b3c4;
    animation-name: indicator-load;
    animation-duration: 7s;
}

@keyframes indicator-load {
    from {
        width: 0;
    }
    to {
        width: 200px;
    }
}
    </style>
<div class="timeIndicator"></div>
</body>
</html>

Which is supposed to show a self-growing rectangle indicator which grows evenly then stops at 200px width.

As can be seen, no easing is added anyhow.

Why then the animation slows down in the end and how to disable it making it even from start to end?

Upvotes: 2

Views: 3932

Answers (2)

Danny McVey
Danny McVey

Reputation: 56

Lookup the animation-timing-function animation property.

Upvotes: 0

Aravind Reddy
Aravind Reddy

Reputation: 767

If i have understood you correctly this is what you may need
just use the animation-timing-function:linear here i have done it

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Load indicator slowing down</title>
</head>
<body>
  <style>
    .timeIndicator {
    height: 5px;
    width: 0;
    background: #12b3c4;
    animation-name: indicator-load;
    animation-duration: 7s;
    animation-timing-function: linear;
}

@keyframes indicator-load {
    from {
        width: 0;
    }
    to {
        width: 200px;
    }
}
    </style>
<div class="timeIndicator"></div>
</body>
</html>

Upvotes: 5

Related Questions