3
La couleur du texte doit changer en même temps que la rotation et la couleur d'arrière-plan lorsque vous passez la souris sur un cercle. Firefox, IE, Edge tout s'anime comme prévu, mais Chrome retarde la transition de la couleur du texte comme si elle attendait la fin du tour avant d'animer et même de laisser un espace entre la rotation et le changement de couleur du texte.Délai de transition CSS dans Google Chrome
http://codepen.io/rachelreveley/pen/YNZawG
body {
text-align: center;
background-color: #122d40;
}
a {
display: inline-block;
width: 20rem;
height: 20rem;
margin: 1rem;
transition: all 1s ease;
position: relative;
border-radius: 100%;
text-decoration: none;
color: #fff;
overflow: hidden;
background-color: #7fb400;
transform: rotate(0deg);
}
a > span,
a span span {
display: block;
transition: inherit;
}
a span span:first-child {
position: absolute;
width: 100%;
height: 100%;
top: 40%;
text-transform: uppercase;
font-size: 40px;
}
a span span:last-child {
opacity: 0;
padding: 2rem 3rem;
}
a:hover {
background-color: #fff;
color: #122d40;
transform: rotate(360deg);
}
a:hover span span:first-child {
opacity: 0;
}
a:hover span span:last-child {
opacity: 1;
}
<a href=""><span><span>Space</span><span><h1>Lorem ipsum</h1> dolor sit amet, consectetur adipiscing elit. Ita nemo beato beatior. Si longus, levis; Utinam quidem dicerent alium alio beatiorem! Iam alium alio ruinas videres. Tamen a proposito, inquam, aberramus. </span> </span></a>
<a href=""><span><span>Speed</span><span><h1>Lorem ipsum</h1> dolor sit amet, consectetur adipiscing elit. Ita nemo beato beatior. Si longus, levis; Utinam quidem dicerent alium alio beatiorem! Iam alium alio ruinas videres. Tamen a proposito, inquam, aberramus. </span></span></a>
<a href=""><span><span>Support</span><span><h1>Lorem ipsum</h1> dolor sit amet, consectetur adipiscing elit. Ita nemo beato beatior. Si longus, levis; Utinam quidem dicerent alium alio beatiorem! Iam alium alio ruinas videres. Tamen a proposito, inquam, aberramus. </span></span></a>