Please nest and extend and spaces between colon and value. For example:
%wb-fade-opacity-0 {
	opacity: 0;
}
%wb-fade-opacity-1 {
	opacity: 1;
}

```scss
.wb-fade-in-test {
	@extend %wb-fade-opacity-0;
	@extend %transition-300;
	&:hover {
		@extend %wb-fade-opacity-1;
	}
}
wb-fade-out-test {
	@extend %wb-fade-opacity-1;
	@extend %transition-500;
	&:hover {
		@extend %wb-fade-opacity-0;
	}
}