मैंने जनवरी 2016 में CSS3 @keyframes सिंटैक्स सीखा और, 2 साल बाद, अब मैं अपने काम की थोड़ी सी मात्रा में @keyframes एनिमेशन का उपयोग कर पाता हूं (CSS3 ट्रांज़िशन से अधिक परिष्कृत, जावास्क्रिप्ट-आधारित से कम बोझिल एनिमेशन)।

एक चीज जो मुझे वास्तव में याद आती है, वह है @keyframes को प्रतिशत के बजाय सेकंड में व्यक्त करने की क्षमता। क्या इसे हासिल करने के लिए कोई हैक है?

मुझे पता है कि मैं निम्नलिखित 100s हैक का उपयोग इंद्रधनुषी रंगों के माध्यम से साइकिल चलाने के लिए कर सकता हूं, प्रत्येक 3 सेकंड में एक चक्र के साथ:

div {
    width: 120px;
    height: 120px;
    background-color: violet;
    animation: myAnimation 100s;
}

@keyframes myAnimation {
    0% {background-color: red;}
    3% {background-color: orange;}
    6% {background-color: yellow;}
    9% {background-color: green;}
   12% {background-color: cyan;}
   15% {background-color: blue;}
   18% {background-color: violet;}
  100% {background-color: violet;}
}
<div></div>

लेकिन इसका मतलब है कि एनीमेशन अभी भी चल रहा है (यद्यपि अगोचर रूप से) एक और 82 सेकंड के लिए इसके (प्रभावी रूप से) समाप्त होने के बाद भी। अन्य चिंताओं के अलावा, यह कई पुनरावृत्तियों को पहुंच से बाहर कर देता है।

मैं वास्तव में जो लिखना चाहता हूं वह बस है:

@keyframes myAnimation {

  0s {background-color: red;}
  3s {background-color: orange;}
  6s {background-color: yellow;}
  9s {background-color: green;}
 12s {background-color: cyan;}
 15s {background-color: blue;}
 18s {background-color: violet;}
}

क्या ऊपर दिए गए कोड बॉक्स में मेरे द्वारा बताए गए तरीके से बेहतर कोई तरीका है?


एकाधिक तत्वों का उपयोग करने वाला उदाहरण

मुझे लगता है कि मैंने शायद ऊपर दिए गए उदाहरण को बहुत सरल बना दिया है क्योंकि इसमें एक तत्व को एनिमेट करना शामिल है और मेरा प्रश्न मूल रूप से एक दूसरे के साथ सिंक में कई तत्वों को एनिमेट करने की इच्छा से उभरता है।

तो, यहाँ एक और अधिक विस्तृत उदाहरण है, जो एक सेट-अप को बहुत करीब दिखा रहा है जिसने मेरे प्रश्न को पहली जगह में जन्म दिया:

div {
display: inline-block;
width: 48px;
height: 48px;
margin-right: 6px;
}

div:nth-of-type(1) {
background-color: red;
}

div:nth-of-type(2) {
background-color: orange;
animation: myAnimationOrange 100s;
}

div:nth-of-type(3) {
background-color: yellow;
animation: myAnimationYellow 100s;
}

div:nth-of-type(4) {
background-color: green;
animation: myAnimationGreen 100s;
}

div:nth-of-type(5) {
background-color: cyan;
animation: myAnimationCyan 100s;
}

div:nth-of-type(6) {
background-color: violet;
animation: myAnimationViolet 100s;
}

@keyframes myAnimationOrange {
    0% {background-color: white;}
    1% {background-color: white;}
    2% {background-color: orange;}
  100% {background-color: orange;}
}

@keyframes myAnimationYellow {
    0% {background-color: white;}
    2% {background-color: white;}
    3% {background-color: yellow;}
  100% {background-color: yellow;}
}

@keyframes myAnimationGreen {
    0% {background-color: white;}
    3% {background-color: white;}
    4% {background-color: green;}
  100% {background-color: green;}
}

@keyframes myAnimationCyan {
    0% {background-color: white;}
    4% {background-color: white;}
    5% {background-color: cyan;}
  100% {background-color: cyan;}
}

@keyframes myAnimationViolet {
    0% {background-color: white;}
    5% {background-color: white;}
    6% {background-color: violet;}
  100% {background-color: violet;}
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
9
Rounin 29 मार्च 2018, 01:53

3 जवाब

सबसे बढ़िया उत्तर

यह न भूलें कि आप एक ही तत्व पर कई एनिमेशन चला सकते हैं, और आप उनके duration, delay और अन्य सभी animation-... नियम स्वतंत्र रूप से सेट कर सकते हैं।

उदाहरण के लिए, आप अपने सभी मुख्य-फ़्रेम को एकल-कुंजी @keyframes नियमों में विभाजित कर सकते हैं।
फिर यह नियंत्रित करना आसान है कि वे कब किक मारेंगे और उन्हें जंजीर में डाल देंगे।

div {
    width: 120px;
    height: 120px;
    background-color: violet;
    animation-fill-mode: forwards;
    animation-name: orange, yellow, green, cyan, blue, violet;
    animation-delay: 0s, 3s, 6s, 9s, 12s, 15s, 18s;
    animation-duration: 3s; /* same for all */
}

@keyframes orange {
    to { background-color: orange; }
}
@keyframes yellow {
    to { background-color: yellow; }
}
@keyframes green {
    to { background-color: green; }
}
@keyframes cyan {
    to { background-color: cyan; }
}
@keyframes blue {
    to { background-color: blue; }
}
@keyframes violet {
    to { background-color: violet; }
}
<div></div>

प्रश्न के संपादन के संबंध में

इस मामले में, आपको एक ही तत्व पर कई एनिमेशन को संयोजित करने की भी आवश्यकता नहीं है, लेकिन बस animation-delay को तदनुसार सेट करें:

div {
 /* same for all */
    width: 60px;
    height: 60px;
    display: inline-block;
    background-color: white;
    animation-fill-mode: forwards;
    animation-duration: 3s;
}
div:nth-of-type(1) {
  animation-name: orange;
  animation-delay: 0s;
}
div:nth-of-type(2) {
  animation-name: yellow;
  animation-delay: 3s;
}
div:nth-of-type(3) {
  animation-name: green;
  animation-delay: 6s;
}
div:nth-of-type(4) {
  animation-name: cyan;
  animation-delay: 9s;
}
div:nth-of-type(5) {
  animation-name: blue;
  animation-delay: 12s;
}
div:nth-of-type(6) {
  animation-name: violet;
  animation-delay: 15s;
}

@keyframes orange {
    to { background-color: orange; }
}
@keyframes yellow {
    to { background-color: yellow; }
}
@keyframes green {
    to { background-color: green; }
}
@keyframes cyan {
    to { background-color: cyan; }
}
@keyframes blue {
    to { background-color: blue; }
}
@keyframes violet {
    to { background-color: violet; }
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

लेकिन अगर आप दोनों को एक साथ जोड़ना चाहते हैं, तो यह भी संभव है:

div {
 /* same for all */
    width: 60px;
    height: 60px;
    display: inline-block;
    background-color: white;
    animation-fill-mode: forwards;
    animation-duration: 3s;
}
div:nth-of-type(1) {
  animation-name: orange, yellow, green, cyan, blue, violet;
  animation-delay: 0s, 3s, 6s, 9s, 12s, 15s;
}
div:nth-of-type(2) {
  animation-name: yellow, green, cyan, blue, violet;
  animation-delay: 3s, 6s, 9s, 12s, 15s;
}
div:nth-of-type(3) {
  animation-name: green, cyan, blue, violet;
  animation-delay: 6s, 9s, 12s, 15s;
}
div:nth-of-type(4) {
  animation-name: cyan, blue, violet;
  animation-delay: 9s, 12s, 15s;
}
div:nth-of-type(5) {
  animation-name: blue, violet;
  animation-delay: 12s, 15s;
}
div:nth-of-type(6) {
  animation-name: violet;
  animation-delay: 15s;
}

@keyframes orange {
    to { background-color: orange; }
}
@keyframes yellow {
    to { background-color: yellow; }
}
@keyframes green {
    to { background-color: green; }
}
@keyframes cyan {
    to { background-color: cyan; }
}
@keyframes blue {
    to { background-color: blue; }
}
@keyframes violet {
    to { background-color: violet; }
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
11
Community 20 जून 2020, 09:12

आपका हैक थोड़ा अजीब है। क्यों न केवल एनिमेशन अवधि के लिए 18s का उपयोग करें, और लगातार प्रतिशत के माध्यम से चक्र करें?

div {
   width: 120px;
   height: 120px;
   background-color: violet;
   animation: myAnimation 18s;
}

@keyframes myAnimation {
   0% {background-color: red;}
   18% {background-color: orange;}
   37% {background-color: yellow;}
   55% {background-color: green;}
   71% {background-color: cyan;}
   88% {background-color: blue;}
   100% {background-color: violet;}
}
<div></div>

मुझे नहीं लगता कि आप अपने @keyframes अंतराल के लिए सेकंड का उपयोग करने में सक्षम हैं। हम पहले से ही CSS में बाकी सब चीजों के लिए सेकंड का उपयोग करते हैं। देखें कि यह यहां कैसे काम करता है

-1
Tanner Babcock 29 मार्च 2018, 00:49

इस क्षण नहीं। दस्तावेज़ीकरण स्पष्ट रूप से कहता है कि आप केवल प्रतिशत का उपयोग कर सकते हैं:

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

संभवतः, इसके पीछे का कारण यह है कि एनिमेशन की अवधि कीफ़्रेम में परिभाषित नहीं है, बल्कि animation-duration प्रॉपर्टी में है, इसलिए इंटरपोलेटर को कीफ़्रेम को किसी भी अवधि तक फैलाने में सक्षम होना चाहिए।

1
Máté Safranka 28 मार्च 2018, 22:59