Delay CSS transition in Google Chrome
The text color should change along with the rotation and background color when hovering over the circle.
Firefox, IE, Edge all expect as expected, but Chrome delays the text color transition as if it waits for the rotation to finish before animating and even leaves a gap between the color change and the text color.
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>
+3
source to share
1 answer
The problem is here:
a > span,
a span span {
transition: inherit;
}
Is this transition really necessary? Try to remove the property.
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;
}
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>
+1
source to share