CODEWITHSUNDEEP
htmlcssanimation
user5582011
user5582011

Reputation:

CSS Animation - Having a delay when infinite animation restarts

I have an animation which I want to play infinitely to catch the users attention. It looks like this:

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

What I want to achieve is, that when the corner of the "paper" is folded, it will be paused for like 3 seconds. Then the paper corner should go back. Before restarting the animation I want a 5 second delay.

I have looked up for more information about css animations but there is nothing which really fits my needs. Do I need to switch to 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;
 }
}

Upvotes: 0

Views: 270

Answers (4)

Abhitalks
Abhitalks

Reputation: 28387

when the corner of the "paper" is folded, it will be paused for like 3 seconds. Then the paper corner should go back. Before restarting the animation I want a 5 second delay.

So in total you have 3 + 5 = 8 i.e. an 8-second animation.

Easiest way would be to divide your entire animation into these 8 parts. For convenience sake, let's say 10-second animation.

First, make the animation-duration: 10s; i.e. the entire length.

Next, divide 100 by 10 and you get 10% intervals.

Now, you want a 3-second delay while starting. So, that means from 0% to 30% there is no animation. Where each 10% denotes a 1s (we divided into these chunks above). So no change in height/width.

So, your key-frames would look like this:

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

Next, you want end of the animation to stay for 5 seconds. Apply the same mechanism, but this time from the end. So, starting from 100% stepping 10% for each 1-second, you reach to 50% for 5-seconds. This means from 50% to 100% there is no change with width/height which is the end size.

So, your key-frames would now look like this:

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

Putting it all together in a Fiddle: https://jsfiddle.net/abhitalks/ntgtaber/

Snippet:

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

Upvotes: 0

pol
pol

Reputation: 2701

Put a longer animation-duration and add more keyframes. 0% and 100% are assumed. so it's not necessary to define them.

#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;
  }

}

Upvotes: 0

Chiller
Chiller

Reputation: 9738

to get the 5 second delay you need to add animation-delay:5s; to #fpc_corner-box or you can set the animation-duration: 8s;

and for the pause you can somehow achieve it using % in the animation like so:

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

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

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

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

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

Codepen demo

Upvotes: 2

red security
red security

Reputation: 303

As i understand you can use `

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

`

Upvotes: 0

Related Questions