Es siempre mejor práctica estilar clases y no elementos. Así que mi sugerencia es la siguiente. No sé por qué envuelves el elemento en un span pero de todas formas es irrelevante el elemento, cuando usas clases. De ahí a que sea mejor práctica.
Aqui te dejo el codepen https://codepen.io/anon/pen/qJqGej
HTML
<div class="input__wrapper">
<label class="input__label">Elemento a dar foco:
<input type="text" class="input__text isNotFocused" placeholder="dame foco!"></label>
</div>
JS
$(document).ready(function() {
// cashea los elementos para mejor performance
var $input = $('.input__text'),
$wrapper = $('.input__wrapper');
function enfocame() {
$input
.removeClass('isNotFocused')
.addClass('isFocused');
}
function desenfocame() {
$input
.removeClass('isFocused')
.addClass('isNotFocused');
}
// usa delegacion de evento (event delegation) para mejor performance
$wrapper
.on('focus', '.input__text', enfocame)
.on('blur', '.input__text', desenfocame);
});
CSS
.input__text {
transition: opacity .5s linear;
outline: none;
}
.input__text.isFocused {
border: 2px solid red;
border-left: 10px solid green;
transition: border .5s ease-out;
}
.input__text.isNotFocused {
border: 2px solid grey;
border-left: 10px solid blue;
transition: border .5s ease-out;
}
transition
de CSS pero sin ver el resto del código es un poco difícil darte una respuesta correcta :)