CSS Übergang: wie man diesen Effekt (Verknüpfung Übergänge)

Question

https://jsfiddle.net/hak1e33n/1/

HTML

<a href="#"> 
     <div class="contact-button"> 
      <div class="contact-button-text"> 
       Linkedin 
      </div> 
      <div class="block-1b">L</div> 
      <div class="block-2b">I</div> 
      <div class="block-3b">N</div> 
      <div class="block-4b">K</div> 
      <div class="block-5b">E</div> 
      <div class="block-6b">D</div> 
      <div class="block-7b">I</div> 
      <div class="block-8b">N</div> 
     </div> 
     </a> 

CSS

.block-1b, 
.block-2b, 
.block-3b, 
.block-4b, 
.block-5b, 
.block-6b, 
.block-7b, 
.block-8b { 
    color: #fff; 
    font-family: 'quicksand', sans-serif; 
    text-align: center; 
    line-height: 50px; 
    width: 20%; 
    height: 50px; 
    z-index: 1; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: #506989; 
    transform-origin: top; 
    transform: rotateX(-90deg); 
    transition: .5s; 
} 

.contact-button { 
    width: 200px; 
    height: 50px; 
    border: 1px solid #333; 
    margin: 0 auto; 
    z-index: 2; 
    position: relative; 
    overflow: hidden; 
} 

.contact-button-text { 
    color: #333; 
    font-family: 'quicksand', sans-serif; 
    text-align: center; 
    line-height: 50px; 
    width: 100%; 
    height: 50px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 




.block-1b { 
    width: 25px; 
} 


.block-2b { 
    width: 25px; 
    left: 25px; 
} 


.block-3b { 
    width: 25px; 
    left: 50px; 
} 


.block-4b { 
    width: 25px; 
    left: 75px; 
} 


.block-5b { 
    width: 25px; 
    left: 100px; 
} 


.block-6b { 
    width: 25px; 
    left: 125px; 
} 


.block-7b { 
    width: 25px; 
    left: 150px; 
} 

.block-8b { 
    width: 25px; 
    left: 175px; 
} 
.contact-button:hover .block-1b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
} 

.contact-button:hover .block-2b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .1s; 
} 

.contact-button:hover .block-3b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .2s; 
} 

.contact-button:hover .block-4b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .3s; 
} 

.contact-button:hover .block-5b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .4s; 
} 

.contact-button:hover .block-6b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .5s; 
} 

.contact-button:hover .block-7b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .6s; 
} 

.contact-button:hover .block-8b { 
    transform: translateY(0); 
    background-color: #6b8fbb; 
    transition-delay: .7s; 
} 

---

Dies zu produzieren, ist die Animation ich zur Zeit für meine Taste haben. Ich möchte, dass der Effekt wie eine Catflap schwingt, also schwingt er vorwärts, rückwärts und dann wieder nach vorne, um endlich auszuruhen.

können Sie den Effekt sehe ich hier produzieren wollen: https://jsfiddle.net/6e9jzhtw/

---

Ich mag würde diesen Effekt mit Übergängen zu erzeugen, anstatt Animationen. Gibt es überhaupt Verbindungen, um Übergänge auf einem einzelnen Element zu verbinden? Also auf schweben eines der Brief Fliesen Schaukeln:

-45deg 45deg 0deg

Wenn nicht ich weiß, ich Jquery verwenden, um die Animation zurückgesetzt, so kann ich wieder auf sie schweben und den Effekt sehen, nachdem er gespielt einmal, aber ich würde gerne einen Übergangseffekt machen, wenn möglich.

Danke.

Answer 1

Nicht sicher, warum Sie sagen, dass Sie nur Übergänge anstelle von Animationen verwenden möchten, da beide andere Dinge tun und soweit ich Ihre Frage richtig verstehe, wollen Sie beide.

Ein transition wird verwendet, um die Geschwindigkeit beim Ändern (spezifische, nicht alle) CSS-Eigenschaften zu steuern.

Dies ist, was Sie für die :hover on/off zu wollen, scheinen

Ein animation ist nur ein Bündel von vorbereiteten Übergänge ein vordefiniertes Muster verwenden, können Sie komplexere Zwischenzustände so geschehen ermöglicht.

Nun, warum habe ich gesagt, Sie beide brauchen? Sie scheinen in der Lage zu sein, den Effekt auf :hover des Hauptelements (Knopfes) zu starten/zu stoppen, normalerweise ist das der perfekte Kandidat für einen Übergang. Die "Catflap" ist eine komplexere Sequenz von Zuständen, so dass dies (von Design) als eine Animation qualifiziert.

Um diese beiden zusammenarbeiten zu haben, benötigen Sie einen „Zustand, wie Sie es mit und ohne :hover wollen“ definieren, so dass Sie so etwas wie

.contact-button [class*=block-] { 
    /* .. removed style properties for clarity */ 
    transform: rotateX(-90deg); 
    transition: transform .2s ease-in-out, 
       background-color .3s ease-out; 
} 
.contact-button:hover [class*=block-] { 
    transform: rotateX(0); 
    background-color: #6b8fbb; 
} 

HINWEIS haben würde: ich bin sehr faul Entwickler, und anstatt .block-1b, .., .block-8b zu definieren, sagte ich einfach alle Elemente mit einem wie block-, diese Art von attribute selectors ist bekannt, langsam zu sein (noch ist es wahrscheinlich sehr niedrig auf den Listen der Bedenken für diese Demo).

Dies gibt einen sehr grundlegenden Übergang, der den grundlegenden "fallenden" Effekt ermöglicht. Jetzt müssen wir es für jedes block- ein bisschen verzögern.

.contact-button [class*=block-]:nth-of-type(8n+1) { 
    /* intentionally left "blank" */ 
} 

.contact-button [class*=block-]:nth-of-type(8n+2) { 
    transition-delay: .05s; 
} 

/* ...etc up to nth-of-type(8n+8) */ 

Während die transition-delay des ersten Elements verlässt den Standard sein (die keine Verzögerung ist), müssen wir alle anderen beeinflussen, Ich mag die nth-child und nth-of-type für diesen Einsatz.

Aus Gründen der Klarheit ich das erste Element <div>-<span> für den alleinigen Zweck umbenannt habe in der Lage zu sein, die nth-of-type (die den Elementtyp entspricht) zu verwenden

ok, so dass nun der Übergang auf :hover erfolgt und Jedes Plättchen wird nach dem vorherigen "fallen".

Dann müssen wir die "Catflap" ansprechen. Wie oben erwähnt, ist dies ein Kandidat für eine Animation (wie Sie bereits herausgefunden haben), also müssen wir die Animation hinzufügen. Ich möchte die Animation starten, sobald ich weiß, dass der Übergang abgeschlossen ist, leider muss dies von Hand (oder Javascript, was ich versuche, aus der Gleichung herauszuhalten, wie Sie gedroht haben, jQuery zu verwenden.).

Wir müssen eine Verzögerung wählen, die sich richtig anfühlt, für mich fühlte es sich an, als wäre .15s (150ms) ein guter Wert, Sie könnten sich anders darüber fühlen.

So fügen wir animation-delay zu all den nth-of-type Regeln

.contact-button [class*=block-]:nth-of-type(8n+1) { 
    animation-delay: .15s; 
} 

.contact-button [class*=block-]:nth-of-type(8n+2) { 
    transition-delay: .05s; 
    animation-delay: .2s; 
} 

/* ...etc up to nth-of-type(8n+8) */ 

Dies wird immer enger, mit Ausnahme der Rucken Wirkung, wenn die :hover Mitte Animation ist ausgeschaltet. Dies kann, indem die Animation standardmäßig pausiert fixiert werden und läuft nur während schwebt, wie so

.contact-button [class*=block-] { 
    /* .. removed style properties for clarity */ 
    transform: rotateX(-90deg); 
    transition: transform .2s ease-in-out, 
       background-color .3s ease-out; 
    animation-play-state: paused; 
} 

.contact-button:hover [class*=block-] { 
    transform: rotateX(0); 
    background-color: #6b8fbb; 
    animation: catflap 2s; 
    animation-play-state: running; 
} 

All of this combined leads to the following demo. In dem ich mir auch die Freiheit genommen habe, die 'Catflap' ein wenig natürlicher zu machen, indem ich sie in jeder Runde weniger schwenken lasse.

---

Inzwischen Sie wahrscheinlich fragen, warum ich zuerst ein fauler Entwickler zu sein behauptet und noch so aufwendige CSS-Selektoren geschrieben. Nun, um ehrlich zu sein, würde ich etwas wie .contact-button:hover :nth-of-type(8n+3) verwenden und mich nie mit Klassen beschäftigen, da ich die Animation/den Übergang in diesen Regeln nicht kontrollieren würde. Ich würde immer noch eine Klasse verwenden, um diese zu kontrollieren, aber die gleiche für alle, z.B. .contact-button:hover .block, das wird ausreichen.