CSS动画 - 无限动画重启时有延迟

Question

我有一个动画，我想无限播放以吸引用户的注意力。 它看起来像这样：

http://codepen.io/anon/pen/evdqeq

我想要实现的是，当＆＃34;纸张的角落时，＃34;折叠后，它会暂停3秒钟。然后纸角应该回去。在重新启动动画之前，我希望延迟5秒。

我已经查找了有关css动画的更多信息，但没有任何内容真正符合我的需求。 我需要切换到JavaScript吗？

HTML

<div id="fpc_effect-back">
 <div id="fpc_box">
  <div id="fpc_content">
    <img src="http://www.amboss-grimma.de/wp-content/uploads/2016/12/Katalog_Amboss.png">
  </div>
<div id="fpc_corner-box">
        <a id="fpc_page-tip" href="#">
          <div id="fpc_corner-contents">
          <div id="fpc_corner-button"><strong>  </strong></div><div></a>
</div>
</div>
</div>

CSS

#fpc_effect-back {
background-color: #eeeef4;
width: 0;
font: 12pt arial,sans-serif,helvetica,verdana; 
color: #666;
}
#fpc_effect-back * {
    box-sizing: border-box;
}
#fpc_box {
    width: 197px;
    position: relative;
    background-color: #FFF;
}
#fpc_content {
        padding: 0px;
}
#fpc_content:before {
    content:"";
    width: 80px;
    height: 0px;
    float: right;
}
#fpc_page-tip:before, #fpc_page-tip:after {
    background-color: #FFF;
    position: absolute;
    display: block;
    z-index: 2;
    border-top-right-radius: 60%;
    width: 50%;
    height: 50%;
    content: "";
}
#fpc_page-tip:before {
    right: 100%;
    top: 0%;
    background: -webkit-radial-gradient(-180% 200%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,.2) 100%);
}
#fpc_box:hover #fpc_page-tip:before {
    border-right: solid 1px #fff;
}
#fpc_box div#fpc_corner-box:hover #fpc_page-tip:before {
    border-right: solid 2px #fff;
}
#fpc_page-tip:after {
    top: 100%;
    right: 0%;
    background: -webkit-radial-gradient(-250% 320%, circle, rgba(255,255,255,0) 80%, rgba(0,0,0,.2) 100%);
}
#fpc_box:hover #fpc_page-tip:after {
    border-top: solid 1px #fff;
}
#fpc_box div#fpc_corner-box:hover #fpc_page-tip:after {
    border-top: solid 2px #fff;
}
#fpc_corner-box { 
    height: 20px;
    width: 20px;
    right: 0;
    top: 0;
    position: absolute;
    overflow: visible;
  animation-name: paper-corner;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
#fpc_box:hover #fpc_corner-box { 
    height: 65px;
    width: 65px;

}
#fpc_box div#fpc_corner-box:hover { 

}
#fpc_corner-box:before {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    display: block;
    width: 133%;
    height: 133%;
}
#fpc_corner-contents:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    background:  -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 37%, #DDD 62%, rgba(230, 230, 230, 0.1) 64%, rgba(255, 255, 255, 0) 67%), -webkit-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0, 0, 0, 0.2) 74%, transparent 81%);
    display: block;
    width: 133%;
    height: 133%;
}
#fpc_page-tip {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    background: -webkit-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200,200,200,0) 41%);
    display: block;
    width: 100%;
    height: 100%;
}
#fpc_corner-button {

    position: absolute;
    width: 7em;
    top: 0;
    right: 0;
    background-color: none;
    color: #fff;
    font-family: Verdana, Geneva, sans-serif;
    text-align: center;
    padding: 8px 5px;
    border-radius: 0px;
    display: inline-block;
    font-size: 11px;
}
#fpc_corner-contents {
    width: 125%;
    position: absolute;
    display: block;
    overflow: hidden;
    -webkit-mask: -webkit-linear-gradient(45deg, transparent 49%, #000 53%);
    top: 0;
    right: 0;
    height: 125%;
}
#fpc_corner-contents:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: white; /* Match this background color to #fpc_effect-back */
}
#fpc_corner-box, #fpc_corner-contents, #fpc_page-tip {
    -webkit-transition-property: all;
    -webkit-transition-duration: .3s;
    -webkit-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
}
#fpc_corner-button strong {
    font-size: 13px;
    font-weight: bold;
    display: block;
}




@keyframe paper-corner{
    from {height: 20px; width: 20px;}
    to {height: 65px; width: 65px;}
}

@-moz-keyframes paper-corner {
  from {
    height:20px;
    width:20px
  }

  to {
   height:65px;
   width:65px;
 }
}

@-webkit-keyframes paper-corner {
  from {
    height:20px;
    width:20px
  }

  to {
   height:65px;
   width:65px;
 }
}

@keyframes paper-corner {
  from {
    height:20px;
    width:20px
  }

  to {
   height:65px;
   width:65px;
 }
}

Answer 1

要获得5秒延迟，您需要将feeds, err := (&postgres.FeedService{}).GetAllRssFeeds() 添加到＃fpc_corner-box，或者您可以设置animation-delay:5s;

暂停，您可以在动画中使用％以某种方式实现它，如下所示：

animation-duration: 8s;

Codepen demo

Answer 2

  

当“纸张”的一角折叠时，它将暂停为3   秒。然后纸角应该回去。在重新启动之前   动画我希望延迟5秒。

总的来说，你有3 + 5 = 8，即一个8秒的动画。

最简单的方法是将整个动画分成这8个部分。为方便起见，让我们说10秒动画。

首先，制作animation-duration: 10s;，即整个长度。

接下来，将100除以10，然后获得10%个间隔。

现在，您需要在启动时延迟3秒。所以，这意味着从0%到30%没有动画。每个10%表示1s（我们在上面划分为这些块）。所以高度/宽度没有变化。

所以，你的key-frames看起来像这样：

@keyframes paper-corner {
  0% { height: 0px; width: 0px; }
  30% { height: 0px; width: 0px; }
}

接下来，您希望动画结束停留5秒钟。应用相同的机制，但这次从最后开始。因此，从100%步进10%每1秒开始，您到达50% 5秒钟。这意味着从50%到100%，宽度/高度没有变化，这是最终尺寸。

所以，你的key-frames现在看起来像这样：

@keyframes paper-corner {
  0% { height: 0px; width: 0px; }
  30% { height: 0px; width: 0px; }
  50% { height: 65px; width: 65px; }
  100% { height: 65px; width: 65px; }
}

将所有这些放在一个小提琴中： https://jsfiddle.net/abhitalks/ntgtaber/

<强>段：

#fpc_effect-back {
  background-color: #eeeef4;
  width: 0;
  font: 12pt arial, sans-serif, helvetica, verdana;
  color: #666;
}

#fpc_effect-back * {
  box-sizing: border-box;
}

#fpc_box {
  width: 197px;
  position: relative;
  background-color: #FFF;
}

#fpc_content {
  padding: 0px;
}

#fpc_content:before {
  content: "";
  width: 80px;
  height: 0px;
  float: right;
}

#fpc_page-tip:before,
#fpc_page-tip:after {
  background-color: #FFF;
  position: absolute;
  display: block;
  z-index: 2;
  border-top-right-radius: 60%;
  width: 50%;
  height: 50%;
  content: "";
}

#fpc_page-tip:before {
  right: 100%;
  top: 0%;
  background: -webkit-radial-gradient(-180% 200%, circle, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, .2) 100%);
}

#fpc_box:hover #fpc_page-tip:before {
  border-right: solid 1px #fff;
}

#fpc_box div#fpc_corner-box:hover #fpc_page-tip:before {
  border-right: solid 2px #fff;
}

#fpc_page-tip:after {
  top: 100%;
  right: 0%;
  background: -webkit-radial-gradient(-250% 320%, circle, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, .2) 100%);
}

#fpc_box:hover #fpc_page-tip:after {
  border-top: solid 1px #fff;
}

#fpc_box div#fpc_corner-box:hover #fpc_page-tip:after {
  border-top: solid 2px #fff;
}

#fpc_corner-box {
  height: 20px;
  width: 20px;
  right: 0;
  top: 0;
  position: absolute;
  overflow: visible;
  animation-name: paper-corner;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

#fpc_box:hover #fpc_corner-box {
  height: 65px;
  width: 65px;
}

#fpc_box div#fpc_corner-box:hover {}

#fpc_corner-box:before {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  display: block;
  width: 133%;
  height: 133%;
}

#fpc_corner-contents:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 37%, #DDD 62%, rgba(230, 230, 230, 0.1) 64%, rgba(255, 255, 255, 0) 67%), -webkit-radial-gradient(-50% 150%, circle, transparent 74%, rgba(0, 0, 0, 0.2) 74%, transparent 81%);
  display: block;
  width: 133%;
  height: 133%;
}

#fpc_page-tip {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  background: -webkit-linear-gradient(45deg, #ddd 17%, #dfdfdf 18%, #f5f5f5 30%, #f8f8f8 34%, #eee 39%, rgba(200, 200, 200, 0) 41%);
  display: block;
  width: 100%;
  height: 100%;
}

#fpc_corner-button {
  position: absolute;
  width: 7em;
  top: 0;
  right: 0;
  background-color: none;
  color: #fff;
  font-family: Verdana, Geneva, sans-serif;
  text-align: center;
  padding: 8px 5px;
  border-radius: 0px;
  display: inline-block;
  font-size: 11px;
}

#fpc_corner-contents {
  width: 125%;
  position: absolute;
  display: block;
  overflow: hidden;
  -webkit-mask: -webkit-linear-gradient(45deg, transparent 49%, #000 53%);
  top: 0;
  right: 0;
  height: 125%;
}

#fpc_corner-contents:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  /* Match this background color to #fpc_effect-back */
}

#fpc_corner-box,
#fpc_corner-contents,
#fpc_page-tip {
  -webkit-transition-property: all;
  -webkit-transition-duration: .3s;
  -webkit-transition-timing-function: cubic-bezier(0, 0.35, .5, 1.7);
}

#fpc_corner-button strong {
  font-size: 13px;
  font-weight: bold;
  display: block;
}

@keyframes paper-corner {
  0% { height: 0px; width: 0px; }
	30% { height: 0px; width: 0px; }
	50% { height: 65px; width: 65px; }
  100% { height: 65px; width: 65px; }
}

<div id="fpc_effect-back">
  <div id="fpc_box">
    <div id="fpc_content">
      <img src="http://www.amboss-grimma.de/wp-content/uploads/2016/12/Katalog_Amboss.png" />
    </div>
    <div id="fpc_corner-box">
      <a id="fpc_page-tip" href="#">
        <div id="fpc_corner-contents">
          <div id="fpc_corner-button"></div>
        </div>
      </a>
    </div>
  </div>
</div>

Answer 3

据我了解你可以使用`

setTimeout(function(){
     $('#fpc_corner-box').css('animation','paper-corner 2s 1');
}, 5000); // 5000 in ms so it is 5 seconds

`

Answer 4

添加更长的animation-duration并添加更多关键帧。假设0%和100%。所以没有必要定义它们。

#fpc_corner-box { 
  height: 20px;
  width: 20px;
  right: 0;
  top: 0;
  position: absolute;
  overflow: visible;
  animation-name: paper-corner;
  animation-duration: 10s; /**/
  animation-iteration-count: infinite;
}

@keyframes paper-corner {
  10% {
    height: 65px;
    width: 65px;
  }

  40% {
    height: 65px;
    width: 65px;
  }

  50% {
    height: 20px;
    width: 20px;
  }

}