Background-color transition & before/after opacity transition sync issue

user_13044593 0
Viewed 188

I'm currently facing issues fading-in a nav item using before and after pseudo elements.

When I hover the nav item it has to change its background-color from white to blue. Nothing crazy. But it has also to display two background-images, respectively by changing ::before pseudo-element from 0 to 1 and ::after pseudo-element from 0 to 1 too.

The problem is that although I set the same transition duration, the behaviour of the element's fade is a little bit different compared to the background color transition on the itself.

You can also "play" with the hover (jsfiddle) by putting your mouse in and out fastly to see the issue more clearly.

If anyone could help me solving this mistery, it would be much uppreciated :)

Here is my jsfiddle : https://jsfiddle.net/5qnw8ke4/

Here is a screenshot of the transition problem : screen capture

a {
    display: block;
    width: 61px;
    height: 67px;
    margin: 50px;
    background-color: #fff;
    text-align: center;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    line-height: 67px;
    color: #259cff;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
}

a::before, a::after {
    opacity: 0;
    height: 100%;
    position: absolute;
    top: 0;
    content: "";
    -webkit-transition: opacity 0.3s,width 0.3s,left 0.3s,right 0.3s;
    transition: opacity 0.3s,width 0.3s,left 0.3s,right 0.3s;
}

a::before {
    width: 12px;
    left: -12px;
    background: url("https://svgshare.com/i/J61.svg") no-repeat 0;
    background-size: auto 100%;
}

a::after {
    width: 12px;
    right: -12px;
    background: url("https://svgshare.com/i/J4j.svg") no-repeat 100%;
    background-size: auto 100%;
}

a:hover {
    background-color: #259cff;
    color: #fff;
}

a:hover::before, a:hover::after {
    opacity: 1;
    width: 17px;
}

a:hover::before {
    left: -17px;
}

a:hover::after {
    right: -17px;
}
<a href="#">My link</a>

css-transitions pseudo-element background-color background-image css
1 Answers

You can simplify the effect like below without the need of SVG and relying on one pseudo element for the whole shape:

a {
    display: block;
    width: 61px;
    height: 67px;
    margin: 50px;
    text-align: center;
    font-family: "Roboto", sans-serif;
    text-decoration: none;
    line-height: 67px;
    color: #259cff;
    position: relative;
    transition:0.2s;
}

a::before {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   bottom:0;
   left:0;
   right:0; 
   opacity:0;
   padding:0 15px;
   background:
    linear-gradient(#259cff,#259cff) content-box,
    linear-gradient(to top    right,transparent 47%,#259cff 50%) left /15px 100%,
    linear-gradient(to bottom right,transparent 47%,#d4ecff 50%) left /15px 100%,
    linear-gradient(to bottom left ,transparent 47%,#259cff 50%) right/15px 100%,
    linear-gradient(to top    left ,transparent 47%,#d4ecff 50%) right/15px 100%;
   background-repeat:no-repeat;
   transition:inherit;
}
a:hover::before {
  left:-17px;
  right:-17px;
  opacity:1;
}
a:hover {
  color:#fff;
}
<a href="#">My link</a>

another idea with skew transformation:

a {
  display: block;
  width: 61px;
  height: 67px;
  margin: 50px;
  text-align: center;
  font-family: "Roboto", sans-serif;
  text-decoration: none;
  line-height: 67px;
  color: #259cff;
  position: relative;
  transition: 0.2s;
}

a::before,
a::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background: #d4ecff;
  transform: skewX(-12deg);
  transition: inherit;
}

a::after {
  background: #259cff;
  transform: skewX(12deg);
}

a:hover::before,
a:hover::after {
  left: -17px;
  right: -17px;
  opacity: 1;
}

a:hover {
  color: #fff;
}
<a href="#">My link</a>

user_86203330
Related