效果图：

从效果中可以看见 当鼠标点击第一个是 图片一次从左向右进行展开 当点击第二个是 图片是从中间 依次向俩边展开

html：

 <ul class="cards">
      <li class="title">
        <h2>Slide right</h2>
      </li>
      <li class="card card-1">
        <img src="./img/01.jpg" alt="" />
        <div class="content">
          <h1>Card 1 Title</h1>
          <p>Card description</p>
        </div>
      </li>
      <li class="card card-2">
        <img src="./img/02.jpg" alt="" />
        <div class="content">
          <h1>Card 2 Title</h1>
          <p>Card description</p>
        </div>
      </li>
      <li class="card card-3">
        <img src="./img/03.jpg" alt="" />
        <div class="content">
          <h1>Card 3 Title</h1>
          <p>Card description</p>
        </div>
      </li>
    </ul>
    <ul class="cards2">
      <li class="title">
        <h2>Slide right</h2>
      </li>
      <li class="card card-1">
        <img src="./img/04.jpg" alt="" />
        <div class="content">
          <h1>Card 1 Title</h1>
          <p>Card description</p>
        </div>
      </li>
      <li class="card card-2">
        <img src="./img/05.jpg" alt="" />
        <div class="content">
          <h1>Card 2 Title</h1>
          <p>Card description</p>
        </div>
      </li>
      <li class="card card-3">
        <img src="./img/07.jpg" alt="" />
        <div class="content">
          <h1>Card 3 Title</h1>
          <p>Card description</p>
        </div>
      </li>
    </ul>

我们给cards跟cards2 通过定位设置好 当前的位置 包括层级覆盖 给其添加上过渡动画时间 以及延时 当点击时 给ul 添加上.transition这个类 给对应的图片进行left移动

     * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }
      body {
        font-size: 14px;
        font-family: "Raleway", "Source Sans Pro", sans-serif;
        font-weight: 700;
        margin: 20px;
        height: auto;
        background: -webkit-linear-gradient(
          right bottom,
          #f5a1d5 0%,
          #cdd3e9 100%
        );
        background: linear-gradient(to left top, #f5a1d5 0%, #cdd3e9 100%);
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p {
        font-weight: 300;
        margin: 0;
        padding: 0;
      }
      ul.cards {
        width: 660px;
        margin: 0 auto 20px;
        height: 300px;
        position: relative;
        padding: 20px 0;
        cursor: pointer;
      }
      ul.cards {
        width: 660px;
        margin: 0 auto 20px;
        height: 300px;
        list-style-type: none;
        position: relative;
        padding: 20px 0;
        cursor: pointer;
      }
      ul.cards li.title {
        position: absolute;
        height: 20px;
        z-index: 11;
      }
      ul.cards li.title h2 {
        font-weight: 700;
      }
      ul.cards li.card {
        user-select: none;
        background: #fff;
        overflow: hidden;
        height: 200px;
        width: 200px;
        border-radius: 10px;
        position: absolute;
        top: 80px;
        left: 0px;
        box-shadow: 1px 2px 2px 0 #aaa;
        transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
      }
      ul.cards li.card img {
        box-sizing: border-box;
        max-width: 100%;
        padding: 5px;
        height: auto;
      }
      ul.cards li.card div.content {
        padding: 5px 10px;
      }
      ul.cards li.card.card-1 {
        z-index: 10;
        transform: rotateZ(-2deg);
      }
      ul.cards li.card.card-2 {
        z-index: 9;
        transform: rotateZ(-10deg);
        transition-delay: 50ms;
      }
      ul.cards li.card.card-3 {
        z-index: 8;
        transform: rotateZ(10deg);
        transition-delay: 100ms;
      }
      ul.cards.transition li.card {
        transform: rotateZ(0deg);
      }
      ul.cards.transition li.card.card-2 {
        left: 440px;
      }
      ul.cards.transition li.card.card-3 {
        left: 220px;
      }
      /* 2 */
      ul.cards2 {
        width: 660px;
        height: 280px;
        list-style-type: none;
        position: relative;
        margin: 0 auto 20px;
        padding: 20px 0;
        cursor: pointer;
      }
      ul.cards2 li.card {
        position: absolute;
        margin: o auto;
      }
      ul.cards2 li.card {
        background: #fff;
        overflow: hidden;
        height: 200px;
        width: 200px;
        border-radius: 10px;
        position: absolute;
        left: 220px;
        box-shadow: 1px 2px 2px 0 #aaa;
        transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
      }
      ul.cards2 li.title {
        margin: 0 0 20px;
      }
      ul.cards2 li.title h2 {
        font-weight: 700;
      }
      ul.cards2 li.card img {
        box-sizing: border-box;
        max-width: 100%;
        padding: 5px;
        height: auto;
      }
      ul.cards2 li.card .content {
        padding: 5px 10px;
      }
      ul.cards2 li.card.card-1 {
        z-index: 10;
        transform: rotateZ(-2deg);
      }
      ul.cards2 li.card.card-2 {
        z-index: 9;
        transform: rotateZ(-7deg);
        transition-delay: 0.05s;
      }
      ul.cards2 li.card.card-3 {
        z-index: 8;
        transform: rotateZ(5deg);
        transition-delay: 0.1s;
      }
      ul.cards2.transition li.card {
        transform: rotateZ(0);
      }
      ul.cards2.transition li.card.card-1 {
        transition-delay: 50ms;
        left: 0;
      }
      ul.cards2.transition li.card.card-3 {
        transition-delay: 100ms;
        left: 440px;
      }

点击时 给cards跟cards2 绑定点击事件 让其通过toggleClass方法去动态添加移除transiton

 $(document).ready(function () {
    $(".cards").on("click", function () {
      $(this).toggleClass("transition");
    });
    $(".cards2").on("click", function () {
      $(this).toggleClass("transition");
    });
  });