动画固定元素的宽度

Question

我在页面加载时设置了固定元素宽度的麻烦。

这是我的CSS：

.background-right {
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:50%;
  z-index:-1;
  background:#e4d7ca;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.background-right.hidden {
  position:fixed;
  width:0%;
  height:100%;
  top:0;
  left:50%;
  z-index:-1;
  background:#e4d7ca;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

为什么它不起作用的任何想法？

它用于WordPress主题，而html只是：

<div class="background-left"></div>
<div class="background-right hidden"></div>

并在页面加载时使用jquery删除隐藏的类。

谢谢，

斯科特。