Après le survol, l'oiseau s'anime vers la droite car l'animation de la marge gauche a été réappliquée.
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;
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;
}
What is Lorem Ipsum?
Le texte factice Lorem Ipsum animé utilisé dans cette citation est prêt à être tweeté en un clic
Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique électronique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker. Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine classique datant de 45 av. J.-C., le rendant vieux de 2000 ans. Un professeur du Hampden-Sydney College, en Virginie, a cherché l'un des mots latins les plus obscurs, consectetur, extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la littérature classique, découvrit la source incontestable du Lorem Ipsum. Le Lorem Ipsum provient de sections 1.10.32 et 1.10.33 de "de Finibus Bonorum et Malorum" (Des Suprêmes Biens et des Suprêmes Maux) de Cicéron, écrit en 45 av. J.-C. Ce livre est un traité de la théorie de l'éthique, très populaire pendant la Renaissance. La première ligne du Lorem Ipsum, "Lorem ipsum dolor sit amet..", provient d'une ligne dans la section 1.10.32.
