मैं सीएसएस के साथ एक जंपिंग एनीमेशन बनाना चाहता हूं। यहां बताया गया है कि मैं अपने एनीमेशन को कैसे विभाजित करना चाहता हूं:

  1. बढ़ाना
  2. नीचे जाएं और अंतिम हाफ में स्केलिंग शुरू करें
  3. अधिकतम स्केलिंग पर नीचे टच करें
  4. पहले हाफ में फिर से ऊपर की ओर स्केलिंग डाउन करें

लेकिन क्या होता है निम्नलिखित है:

  1. बढ़ाना

  2. नीचे की ओर

  3. स्केल अप

  4. घटाना

  5. बढ़ाना

    @keyframes jump {
      0% {
        transform: translateY(0);
      }
    
      10% {
        transform: translateY(-30%);
      }
    
      15% {
       transform: scale(1, 1);
      }
    
      20% {
       transform: translateY(0) scale(1.25, 0.75);
      }
    
      25% {
       transform: scale(1, 1);
      }
    
      30% {
       transform: translateY(-20%);
      }
    }
    
css
0
Théo Lavaux 27 सितंबर 2020, 01:14

1 उत्तर

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

यह थोड़ा और स्वाभाविक लगा ...

@keyframes jump {
  0% {
    transform: translateY(0) scale(1, 1);
  }

  15% {
    transform: translateY(-30%) scale(1, 1);
  }
  
  22% {
    transform: translateY(0) scale(1, 1);
  }

  25% {
    transform: translateY(10%) scale(1.25, 0.75);
  }

  30% {
    transform: translateY(-20%) scale(1, 1);
  }
  
  36% {
    transform: translateY(0) scale(1, 1);
  }

  40% {
    transform: translateY(5%) scale(1.1, 0.95);
  }
  
  44% {
    transform: translateY(-10%) scale(1, 1);
  }
  
  47% {
    transform: translateY(0) scale(1, 1);
  }
}

.item {
  width: 5rem;
  height: 5rem;
  margin: 2rem;
  border-radius: 100%;
  background: rebeccapurple;
  animation: jump 3s infinite;
}
<div class="item"></div>
1
Dominik 26 सितंबर 2020, 22:47