CSS Animatsiyasi - abadiy animatsiya qayta boshlanganda kechikish mavjud

Foydalanuvchilarning e'tiborini tortish uchun abadiy o'ynashni istagan animatsiyaim bor. Bu quyidagicha ko'rinadi:

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

Men erishmoqchi bo'lgan narsa: "qog'oz" ning burchagi katlanmışsa, u 3 soniya kabi pauza qilinadi. Keyin qog'oz burchagi qaytib ketishi kerak. Animatsiyani qayta boshlashdan oldin men 5 soniya kechikishni xohlayman.

CSS-animatsiyalari haqida ko'proq ma'lumotga ega bo'ldim, ammo mening ehtiyojlarimga mos keladigan hech narsa yo'q. JavaScript-ga o'tishim kerakmi?

HTML

<div id="fpc_effect-back">
 <div id="fpc_box">
  <div id="fpc_content">
    
  </div>
<div id="fpc_corner-box">
        
          <div id="fpc_corner-contents">
          <div id="fpc_corner-button"> </div><div>
</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;
 }
}
0

7 javoblar

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;

va pauza uchun animatsiyada quyidagicha foydalansangiz bo'ladi:

   @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

3
qo'shib qo'ydi
Rahmat, faqat erishmoqchi bo'lganim!
qo'shib qo'ydi muallif Insane, manba
@Insane mening javobimni tahrir qilgandim
qo'shib qo'ydi muallif Chiller, manba
Yordamga xursand bo'ldim!
qo'shib qo'ydi muallif Chiller, manba

"qog'oz" ning burchagini kattalashganda, u kabi 3 uchun pauza qilinadi   soniya. Keyin qog'oz burchagi qaytib ketishi kerak. Qayta ishga tushirishdan oldin   animatsiya Men 5 soniya kechikishni xohlayman.

Shunday qilib, jami sizda 3 + 5 = 8 , ya'ni 8 soniyali animatsiya mavjud.

Sizning barcha animatsiyangizni ushbu 8 qismga ajratish eng oson yo'li bo'ladi. Qulaylik uchun, 10 soniyali animatsiya aytamiz.

Birinchidan, animatsiya-davomiyligini: 10s; , ya'ni butun uzunligini bajaring.

Keyin 100 ni 10 bilan ajratib oling va siz 10% oralig'ini olasiz.

Endi ishga tushirilganda 3 soniyali kechikish kerak. Demak, bu 0% dan 30% degan ma'noni anglatadi. Unda animatsiya yo'q. Har bir 10% kodi 1s ni ifodalaydi (biz yuqorida ko'rsatilgan qismlarga bo'lingan). Shunday qilib, balandlik/kenglikdagi o'zgarish yo'q.

Shunday qilib, kalit-ramkalari quyidagi kabi ko'rinadi:

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

So'ngra animatsiyani tugatishni 5 soniya davom ettirmoqchisiz. Xuddi shu mexanizmni qo'llang, lekin bu safar oxiridan. Har bir soniya uchun 100% qadamini 10% dan boshlab, 5 soniya davomida 50% ga erishasiz. Bu 50% dan 100% degan ma'noni anglatadi. Bu kenglik/balandlik bilan yakuniy o'lchamli o'zgarish yo'q.

Shunday qilib, sizning kalit-ramkalari hozir shunday bo'ladi:

@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:

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

#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">
      
    </div>
    <div id="fpc_corner-box">
      
        <div id="fpc_corner-contents">
          <div id="fpc_corner-button"></div>
        </div>
      
    </div>
  </div>
</div>
</div> </div>
1
qo'shib qo'ydi

"qog'oz" ning burchagini kattalashganda, u kabi 3 uchun pauza qilinadi   soniya. Keyin qog'oz burchagi qaytib ketishi kerak. Qayta ishga tushirishdan oldin   animatsiya Men 5 soniya kechikishni xohlayman.

Shunday qilib, jami sizda 3 + 5 = 8 , ya'ni 8 soniyali animatsiya mavjud.

Sizning barcha animatsiyangizni ushbu 8 qismga ajratish eng oson yo'li bo'ladi. Qulaylik uchun, 10 soniyali animatsiya aytamiz.

Birinchidan, animatsiya-davomiyligini: 10s; , ya'ni butun uzunligini bajaring.

Keyin 100 ni 10 bilan ajratib oling va siz 10% oralig'ini olasiz.

Endi ishga tushirilganda 3 soniyali kechikish kerak. Demak, bu 0% dan 30% degan ma'noni anglatadi. Unda animatsiya yo'q. Har bir 10% kodi 1s ni ifodalaydi (biz yuqorida ko'rsatilgan qismlarga bo'lingan). Shunday qilib, balandlik/kenglikdagi o'zgarish yo'q.

Shunday qilib, kalit-ramkalari quyidagi kabi ko'rinadi:

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

So'ngra animatsiyani tugatishni 5 soniya davom ettirmoqchisiz. Xuddi shu mexanizmni qo'llang, lekin bu safar oxiridan. Har bir soniya uchun 100% qadamini 10% dan boshlab, 5 soniya davomida 50% ga erishasiz. Bu 50% dan 100% degan ma'noni anglatadi. Bu kenglik/balandlik bilan yakuniy o'lchamli o'zgarish yo'q.

Shunday qilib, sizning kalit-ramkalari hozir shunday bo'ladi:

@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:

<div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

#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">
      
    </div>
    <div id="fpc_corner-box">
      
        <div id="fpc_corner-contents">
          <div id="fpc_corner-button"></div>
        </div>
      
    </div>
  </div>
</div>
</div> </div>
1
qo'shib qo'ydi

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

}
0
qo'shib qo'ydi

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

}
0
qo'shib qo'ydi

Bilaman, `` `foydalanishingiz mumkin

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

`

0
qo'shib qo'ydi
Animatsiya 1 animatsiya-iteratsiya-hisoblashni anglatadi, shuning uchun har 5 soniyada bir marta bajariladi
qo'shib qo'ydi muallif red security, manba

Bilaman, `` `foydalanishingiz mumkin

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

`

0
qo'shib qo'ydi
Animatsiya 1 animatsiya-iteratsiya-hisoblashni anglatadi, shuning uchun har 5 soniyada bir marta bajariladi
qo'shib qo'ydi muallif red security, manba