Анимированная ширина от авто до 100%?

Я не думаю, что CSS может оживить/сделать переход так, как вы хотите. Вы должны использовать скрипт для явной установки начальной ширины. Однако мы должны знать ширину, которая рассчитывается браузером (из width:auto стиля width:auto после визуализации элемента), это можно сделать легко с помощью getComputedStyle или просто методом css в jQuery. Здесь важно изменить стиль с помощью CSSRule, а не через свойство style элемента. Я не уверен, почему это так, но выглядит так, как работает CSS. Вот скрипт, чтобы найти правило #view_album и задать width для определенного значения, чтобы зависание могло сделать переход хорошо:

var ss = document.styleSheets;
for(var i = 0; i < ss.length; i++){
  var rules = ss[i].cssRules || ss[i].rules;
  var br = false;
  for(var j = 0; j < rules.length; j++) {
    if(rules[j].selectorText == '#view_album'){            
        rules[j].style.width = $('#view_album').css('width');
        br = true;
        break;
    }
  }
  if(br) break;
}

Demo.

ПРИМЕЧАНИЕ. При этом не будет больше устанавливаться width:auto для вашего элемента, поэтому вы не должны изменять текст этого элемента динамически (я думаю, это не ваш вариант использования). Если вам нужно изменить его динамически, и ширина должна автоматически расширяться/сворачиваться, вы можете попробовать установить width:auto на нем сначала перед установкой текста /innerHTML.

Вот еще одна версия, позволяющая изменить font-size #view_album так, чтобы ширина была соответствующим образом скорректирована.

Во-первых, измените идентификаторы на классы, поскольку вы повторяете одинаковый идентификатор для всех обложек альбомов.

Вы можете использовать автоматическую ширину и после загрузки сайта запустить сценарий jQuery и добавить текущую ширину в css:

$(document).ready(function(){
    $.each($('.view_album'), function(){
        $(this).css('width', $(this).width() + 'px');
    }
});