CSS LIEBE! Animierte Hintergrund in Blockquote auf Maus über funktioniert, aber auf der Maus nicht

Question

dauerte mich ein paar Stunden, um die Standard <blockquote> Tag generalüberholen und jetzt bin ich auf den letzten Schritt, die Animation fest. Ich habe fast alles versucht, aber es kann funktionieren. Wenn mir jemand hier helfen könnte, würde ich es sehr schätzen.

Im Idealfall würde ich Twitter Vogel gerne in & heraus zu bewegen und verblassen:

Von LINKS zu CENTER (verblassen in, während in Richtung Zentrum bewegt - auf der Maus über) und
Von ZENTRUM bis RECHTS (auszublenden während in Richtung rechts - auf der Maus aus)

Ich habe den Vogel von links t bewegen o zentrieren Sie die Maus über, aber ich kann nicht erreichen, dass es sich mit der Maus von der Mitte nach rechts bewegt.

Bitte beachten Sie, dieses <blockquote> wird individuell mit Pseudo-Klassen & Elements und sieht wie folgt aus.

<blockquote> 
    <a href="#">Text link here</a> 
</blockquote> 

Ich verwendete 1 Klasse für den Link, nur um klickbare Fläche zu erweitern. Wenn Sie einen Weg kennen, der diesen alten Trick nicht beinhaltet, lassen Sie es mich bitte wissen.

Bitte überprüfen Sie meine Arbeit. Alle Vorschläge oder Code-Verbesserungen sind mehr als willkommen.

FIDDLE - https://jsfiddle.net/7kr7en1m

Answer 1

benutzte ich this answer dabei helfen herauszufinden.

Der Schlüssel animierte sowohl Rand links und links. Es funktioniert wie folgt:

1. Der Vogel beginnt rechts von der
2. auf schweben, der Vogel bewegt sich nach links von der ohne Animation von margin-left auf 0 gesetzt wird, und dann beginnt die left Eigenschaft beginnt mit dem Animieren.
3. Nach dem Mauszeiger animiert der Vogel nach rechts, weil die Animation margin-left erneut angewendet wurde.

a { 
 
    text-decoration: none; 
 
} 
 

 
a:link { 
 
    color: #f00; 
 
} 
 

 
a:visited { 
 
    color: #f00; 
 
} 
 

 
a:hover { 
 
    color: rgba(0, 0, 0, 0); 
 
} 
 

 
blockquote { 
 
    position: relative; 
 
    font-weight: 900; 
 
    font-size: 18px; 
 
    line-height: 22px; 
 
    text-align: left; 
 
    padding: 10px 35px 10px; 
 
    margin: 0 15px; 
 
    border: solid 1px rgb(220, 220, 220); 
 
    border-radius: 10px; 
 
    position: relative; 
 
    background-color: white; 
 
    box-shadow: 5px 5px 20px #e9edef; 
 
    width: 20%; 
 
    min-width: 200px; 
 
    float: right; 
 
\t overflow: hidden; 
 
} 
 

 
blockquote:hover { 
 
    
 
} 
 

 
a:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    left: -90%; 
 
    margin-left: 200%; 
 
    transition: left 300ms linear, margin-left 300ms ease-out; 
 
    color: #009fff; 
 
    cursor: pointer; 
 
    background-image: url('http://image.prntscr.com/image/39b3926093f442c095554fb6a147ef01.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: contain; 
 
    /* transition: background-image 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -ms-transition: all 0.5s ease; 
 
    -webkit-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; */ 
 
} 
 

 
a:before { 
 
    content: ''; 
 
    transition: background-color 300ms ease; 
 
} 
 

 
a:hover:before { 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-position: center; 
 
    background-size: contain; 
 
    background-color: #009fff; 
 
    border: solid 1px #009fff; 
 
} 
 

 
a:hover:after { 
 
    transition: left 300ms ease-out; 
 
    margin-left: 0; 
 
    left: 0; 
 
}

<h3> 
 
What is Lorem Ipsum? 
 
</h3> 
 

 
<blockquote> 
 
    <a href="#" class="qoute-to-tweet">Animated Lorem Ipsum dummy text that is used in this quote is ready to be tweeted with one click</a> 
 
</blockquote> 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.