Twine CSS transitions everything on div except movement

Question

I'm working in Twine (version 2, Harlowe 2.1.0) and I want .choices to smoothly move to the right when I hover over it. Every other transition on .choices works fine, but for some reason, movement is the only one to just switch between states. I've tried specifying what transition should apply to, but the results are the same as if I didn't. Here's a JSFiddle link to all the relevant code. As ugly and misleading as this version may be, the hover behavior works exactly like it does in Twine.

Also, the relevant HTML and CSS:

    <div class="choices"><div class="shape"></div>[[Color selections|Colors]]</div>

    <div class="choices"><div class="shape"></div>[[Pop-up test let us see how far we can stretch this|Pop-up test passage]]</div>


    .choices {
      background-color: #B3AE99;
      position: relative;
      width: 250px;
      padding: 10px;
      transition: all 0.5s ease-in-out;
      color: #4F4D44;
    }

    .choices tw-link {
      color: #4F4D44;
      vertical-align: center;
      transition: all 0.5s ease-in-out;
    }

    .choices:hover {
      background-color: #666357;
      right: -25px;
      transition: all 0.5s ease-in-out;
    }

    .choices:hover tw-link {
      color: #CAC4AC;
    }

    .shape {
      height: 25px;
      width: 25px;
      background-color: #4F4D44;
      float: left;
      margin-right: 10px;
      margin-top: 5px;
      margin bottom: 10px;
      vertical-align: middle;
      padding: 10px;
      transition: all 0.5s ease-in-out;
    }

    .choices:hover .shape {
      background-color: #CAC4AC;
    }

Answer 1

Set right:0 to .choices. Transitions need the initial state to be specified.

tw-story {
  background-color: #CBC6AE;
  background-image: url("images/Background.png");
  color: #524F47;
  font-family: Futura, Impact, Helvetica, sans-serif;
}

.choices {
  background-color: #B3AE99;
  position: relative; right:0;
  width: 250px;
  padding: 10px;
  transition: all 0.5s ease-in-out;
  color: #4F4D44;
}

.choices tw-link {
  color: #4F4D44;
  vertical-align: center;
  transition: all 0.5s ease-in-out;
}

.choices:hover {
  background-color: #666357;
  right: -25px;
  transition: all 0.5s ease-in-out;
}

.choices:hover tw-link {
  color: #CAC4AC;
}

.shape {
  height: 25px;
  width: 25px;
  background-color: #4F4D44;
  float: left;
  margin-right: 10px;
  margin-top: 5px;
  margin bottom: 10px;
  vertical-align: middle;
  padding: 10px;
  transition: all 0.5s ease-in-out;
}

.choices:hover .shape {
  background-color: #CAC4AC;
}

<div class="choices"><div class="shape"></div>[[Color selections|Colors]]</div>
<p>
<p>
<p>
<p>
<div class="choices"><div class="shape"></div>[[Pop-up test let us see how far we can stretch this|Pop-up test passage]]</div>