title: CSS transitions: smoothly animating the widths of videos fails
body: <p>I have made a horizontal carousel of videos (and captions) using Twitter Bootstrap 4, the <strong><a href="https://github.com/utatti/perfect-scrollbar" rel="nofollow noreferrer">perfect-scrollbar plugin</a></strong> and some custom CSS.</p>
  
  <p>My goal is to animate the width of the videos from 0 to 100%, with a smooth transition. I want to animate the width <em>only</em> but the height also gets animated. The code I have written so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>if ($('#carousel').length &gt; 0) {
      var ps = new PerfectScrollbar('#carousel', {
          useBothWheelAxes: true,
          maxScrollbarLength: 100
      });
  
      $('.video-box').each(function() {
          var vid = $(this).find('video');
          vid.closest('.video-container').addClass('loaded');
          vid.hover(function() {
              $(this).get(0).play();
          }, function() {
              $(this).get(0).pause();
          })
      });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hero {
    height: 100vh;
    background: #111;
  }
  #carousel {
    display: flex;
    list-style-type: none;
    position: relative;
    min-width: 100vw;
    margin: 0;
    padding: 0;
    justify-content: left;
    align-items: center;
  }
  #carousel li {
    padding: 0;
   flex-shrink: 0;
   position: relative;
  }
  #carousel li a {
    text-decoration: none;
    color: #fff;
    display: block;
  }
  #carousel li .video-container video {
    transition: width 1s ease-in-out;
    width: 0;
    height: 100%;
  }
  #carousel li .video-container.loaded video {
    width: 100%;
  }
  #carousel li .caption {
    padding: 20px 20px 0 20px;
  }
  #carousel li h2 {
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    padding: 0;
  }
  #carousel li p {
    font-size: 9px;
    padding: 0;
    margin: 5px 0 0 0;
  }
  #carousel .ps__rail-x {
    background: #5C5C5C;
    height: 3px;
    margin: 0 40% 10vh 40%;
  }
  #carousel .ps__thumb-x {
    height: 3px;
    margin-bottom: -2px;
    border-radius: 0;
    background: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code-love.tk/demos/prop/lib/js/perfect-scrollbar.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;link rel="stylesheet" href="http://code-love.tk/demos/prop/lib/css/perfect-scrollbar.css" /&gt;
  &lt;div class="hero carousel-container d-flex"&gt;
    &lt;ul id="carousel"&gt;
      &lt;li class="video-box col-xs-12 col-sm-6 col-md-4"&gt;
        &lt;a href="caz.html"&gt;
          &lt;div class="video-container"&gt;
            &lt;video src="//code-love.tk/video/commerciala.mp4" loop muted&gt;&lt;/video&gt;
          &lt;/div&gt;
          &lt;div class="caption"&gt;
            &lt;h2&gt;Lorem ipsun dolor&lt;/h2&gt;
            &lt;p&gt;A true story&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="video-box col-xs-12 col-sm-6 col-md-4"&gt;
        &lt;a href="#"&gt;
          &lt;div class="video-container"&gt;
            &lt;video src="//code-love.tk/video/commerciala.mp4" loop muted&gt;&lt;/video&gt;
          &lt;/div&gt;
          &lt;div class="caption"&gt;
            &lt;h2&gt;Lorem&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="video-box col-xs-12 col-sm-6 col-md-4"&gt;
        &lt;a href="#"&gt;
          &lt;div class="video-container"&gt;
            &lt;video src="//code-love.tk/video/flamenco.mp4" loop muted&gt;&lt;/video&gt;
          &lt;/div&gt;
          &lt;div class="caption"&gt;
            &lt;h2&gt;Lorem ipsum&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="video-box col-xs-12 col-sm-6 col-md-4"&gt;
        &lt;a href="#"&gt;
          &lt;video src="//code-love.tk/video/koffee.mp4" loop muted&gt;&lt;/video&gt;
          &lt;div class="caption"&gt;
            &lt;h2&gt;Into the wild&lt;/h2&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur&lt;/p&gt;
          &lt;/div&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The "live" page is <strong><a href="http://code-love.tk/demos/prop/studii.html" rel="nofollow noreferrer">HERE</a></strong>. What am I doing wrong? What shall I do with the videos?</p>