CODEWITHSUNDEEP
htmlcss
ThomH
ThomH

Reputation: 548

How to pause an animation at the last keyframe

I'm trying to let the animation pause in the last keyframe, so if the lines are at 50% of the page they will stay there and not go back to the first keyframe.

Also is css the best way to do this or is there a easier way to solve this?

The css: 

body, html {
    height: 100%;
    text-align: center;
    margin: 0;
}

body {
    background-color: royalblue;
}

.loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 4px solid white;
    top: 50%;
    animation: loader 4s ease;
}

.line1 {
    position: relative;
    display: inline-block;
    top: 0;
    width: 5px;
    height: 10px;
    border: 2px solid #fff;
    background-color: #fff;
    left: 20%;
    animation: lines 5s infinite ease;

}

.line2 {
    position: relative;
    display: inline-block;
    top: 0;
    width: 5px;
    height: 10px;
    border: 2px solid #fff;
    background-color: #fff;
    right: 20%;
    animation: lines 5s infinite ease;
}

@keyframes lines {
    0%      {   height: 10px; }
    25%     {   height: 10px; }
    50%     {   height: 50%;  }
    75%     {   height: 50%;  }
    100%    {   height: 50%;
                -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
                 animation-play-state: paused; }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Loader1 - by Thom</title>
    <!-- Custom loading-thom -->
    <link href="style.css" rel="stylesheet">
</head>
<body>

<span class="line1"></span>
<span class="line2"></span>

</body>
</html>

Upvotes: 0

Views: 81

Answers (3)

Waqar
Waqar

Reputation: 848

SOLUTION 1:

Your can change animation-fill to forward

SOLUTION 2:

use jquery

<script>
  $(document).ready(function(){  
  var half = $(document).height()/2;

  setTimeout(function(){
     $('.line1 , .line2').animate({height:half});
  },1000);

});

In DEMO below, press Run in jsFiddle;

DEMO: https://jsfiddle.net/0andyke4/5/

Upvotes: 0

hyounis
hyounis

Reputation: 4579

What you are looking for is something called animation-fill. You can read more about it here: http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

So essentially:

.line1,
.line2 {
    animation-fill: forwards; 
}

Also make sure that the animation-fill is declared after the animation rule.

Upvotes: 0

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You could use animation-fill-mode property with forwards as value.

CSS

.line1{
    position: relative;
    display: inline-block;
    top: 0;
    width: 5px;
    height: 10px;
    border: 2px solid #fff;
    background-color: #fff;
    left: 20%;
    animation: lines 5s forwards ease;

}
.line2{
    position: relative;
    display: inline-block;
    top: 0;
    width: 5px;
    height: 10px;
    border: 2px solid #fff;
    background-color: #fff;
    right: 20%;
    animation: lines 5s forwards ease;
}

DEMO HERE

Upvotes: 1

Related Questions