CSS Animation - Having a delay when infinite animation restarts - html

Question

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

Answer 1

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

Answer 2

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
`

Answer 3

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

Answer 4

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>