Here’s a simple pure CSS, plus to minus icon transition. The code is a mixin in SCSS, and currently transitions on :hover, but the :hover can be changed to a class like .is-minus.

Here’s the codepen as well: https://codepen.io/anon/pen/JNywpQ

[css]
@mixin plusMinus($width, $lineWidth, $color) {
box-sizing: border-box;
transition: transform 0.3s;
width: $width;
height: $width;
transform: rotate(180deg);
position: relative;

&:hover {
transform: rotate(0deg);
}
&::before {
content: ”;
display: block;
width: $width;
height:0px;
border-bottom: solid $lineWidth $color;
position: absolute;
bottom:$width /2 – $lineWidth/2;
transform: rotate(90deg);
transition: width 0.3s;
}
&:hover::before {
content: ”;
display: block;
width: 0px;
height:0px;
border-bottom: solid $lineWidth $color;
position: absolute;
bottom:$width /2 – $lineWidth/2;
transform: rotate(90deg);
}
&::after {
content: ”;
display: block;
width: $width;
height:0px;
border-bottom: solid $lineWidth $color;
position: absolute;
bottom:$width /2 – $lineWidth/2;
}
}

.icon {
@include plusMinus(24px, 2px, #a1a1a1);
}

[/css]