Как анимировать border?
не знаю как с помощью бордера, но можно реализовать с помощью абсолютно расположенного єлемента. Примерно так :.element {
	padding: 30px;
	background: #eee;
	position: relative;
	&:after {
		position: absolute;
		content:"";
		width: 0;
		height: 2px;
		background: red;
		bottom: 0;
		right: 0;
		left: 0;
		transition: all .5s;   
	} 

	&:hover {
		&:after {
			width: 100%; 
		}
	}
}
вот как это выглядит
https://jsfiddle.net/ionenkovladimir/qb5m057o/
именно border - никак. но такой эффект делается через absolute элемент, который находится под элементом. и задается ему width: 0; а потом через transition дается ему width: 100%; - тогда ты получишь такой эффект