[Résolu] Mon hover ne marche pas

Salut

J'ai stylisé mes liens pour que au hover le noir disparaisse de la gauche vers la droite et que le rouge prenne sa place de la gauche vers la droite aussi. Le noir disparaît bien comme je le veux, mais le rouge n’apparaît pas. Ça reste blanc.

Le code (Voir sur jsfiddle) :

p a {
	text-decoration:none;
	border-bottom:0;
	background: linear-gradient(180deg, rgb(0,0,0) 100%, rgb(255,0,0) 100%);
	background-size: 100% 14%, 0 14%;
	background-position: bottom left, bottom left;
	background-repeat: no-repeat, no-repeat;
  
	transition-duration: 1s;
	transition-property: background-size;
}

p a:hover {
	text-decoration:none;
	border-bottom:0;
	background: linear-gradient(180deg, rgb(0,0,0) 100%, rgb(255,0,0) 100%);
	background-size: 0 14%, 100% 14%;
	background-position: bottom right, bottom left;
	background-repeat: no-repeat, no-repeat;
    
    transition-duration: 1s;
    transition-property: background-size;
}

Merci pour ta solution