0

I have the fill color of the SVG path set to transition on hover. It works fine when you hover over the graphic, but the color snaps back when you hover out instead of transitioning back. What's going on?

body {
  background: rgb(0, 185, 228);
}

a.facebookIcon {
  display: inline-block;
  margin: 20px;
}

a.facebookIcon svg {
  width: 42px;
  height: 42px;
}

a.facebookIcon svg path {
  fill: rgb(255, 255, 255);
}

a.facebookIcon:hover svg path {
  fill: rgb(182, 52, 187);
  transition: fill 3000ms;
}
<body>
  <a class="facebookIcon" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1017.78" viewBox="0 0 1024 1017.78">
  <path d="M1024,512C1024,229.23,794.77,0,512,0S0,229.23,0,512c0,255.55,187.23,467.37,432,505.78V660H302V512H432V399.2C432,270.88,508.44,200,625.39,200c56,0,114.61,10,114.61,10V336H675.44c-63.6,0-83.44,39.47-83.44,80v96H734L711.3,660H592v357.78C836.77,979.37,1024,767.55,1024,512Z"/>
</svg></a>
Salvatore
  • 1,435
  • 1
  • 10
  • 21
Stever
  • 53
  • 7

2 Answers2

2

The transition is only added to the :hover state, so when your mouse comes off it forgets about the transition. Add the transition to the initial state.

a.facebookIcon svg path{
  fill: rgb(255,255,255);
  transition: fill 3000ms; //HERE
}
Jonathan Southern
  • 1,121
  • 7
  • 22
1

put transition: fill 3000ms; into a.facebookIcon svg path like this

a.facebookIcon svg path{
    fill: rgb(255,255,255);
  transition: fill 3000ms;
}
a.facebookIcon:hover svg path{
    fill: rgb(182,52,187);
}

and not

a.facebookIcon svg path{
    fill: rgb(255,255,255);
}
a.facebookIcon:hover svg path{
    fill: rgb(182,52,187);
    transition: fill 3000ms;
}
LelilolZH
  • 121
  • 5