Question

我试图让动画在最后一个关键帧中暂停，所以如果这些行占据了页面的50％，那么它们将保留在那里而不会回到第一个关键帧。

css也是最好的方法，或者有更简单的方法来解决这个问题吗？

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>

Answer 1

您可以将animation-fill-mode属性与forwards一起用作值。

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

Answer 2

您正在寻找的是animation-fill。您可以在此处详细了解：http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

基本上是这样的：

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

还要确保在animation-fill规则之后声明animation。

Answer 3

解决方案1：

您可以将animation-fill更改为forward

解决方案2：

使用jquery

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

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

}）;

在下面的DEMO中，按jsFiddle中的Run;

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

如何在最后一个关键帧处暂停动画

3 个答案: