为什么我的css动画只有在第一次触发时才会播放？而不是在后续的触发器上再次发生？

Question

我有一个css动画(缝线)，它是通过scrollTop函数用jQuery触发的(本质上是当粘性元素粘在一起时触发的，这是我能找到的唯一方法)。但如果我向上滚动(触发jQuery将css重置为原始)，然后再次向下滚动以触发，动画不会播放，只是直接转到它的结束帧(空白)。

理想情况下，我想实现的目标是：

动画停留在“卡住”之前的第一帧，然后一旦卡住，动画就会播放一次，并在最后一帧(空白)结束。当动画再次变得“非粘滞”时(无论是向上还是向下滚动经过它的“粘性区域”，动画都会反向播放，并再次停留在第一帧。

有没有人能帮我实现这个目标，或者至少解决我最初的问题？

链接到代码最小(尽可能)可重现的示例：

https://codepen.io/noodlesontoast/pen/rXaxPK

我尝试了各种动画属性设置组合，但找不到任何有效的组合。

​

$(document).ready(function() {
       var button = $(".her-panel"); //get offset of second div
       var offset = button.offset().top - 80; //check for top property
       $(function () {
           $(window).scroll(function () {
               if ($(window).scrollTop() >= offset) {
                   $(".her-stitch").css("animation-play-state","running");
                   $(".her-stitch").css("animation-fill-mode","forwards");
               } else if ($(window).scrollTop() < offset) {
                   $(".her-stitch").css("animation-play-state","paused");
                   $(".her-stitch").css("animation-fill-mode","none");
               } 
           });
       });
    });
    
    
    $(document).ready(function() {
         var button = $(".colour-song"); //get offset of second div
         var offset = button.offset().top - 80; //check for top property
         $(function () {
             $(window).scroll(function () {
                 if ($(window).scrollTop() >= offset) {
                   $(".colour-song-stitch").css("animation-play-state","running");
                   $(".colour-song-stitch").css("animation-fill-mode","forwards");
                 } else if ($(window).scrollTop() < offset) {
                   $(".colour-song-stitch").css("animation-play-state","paused");
                   $(".colour-song-stitch").css("animation-fill-mode","none");
                 }
             });
         });
     });

#collections-section {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 4000px;
      background-color: rgba(0, 0, 0, .1);
    }
    #collections-section .section-header {
      margin-bottom: calc(30px + 1%);
    }
    #collections-section .section-header .section-header-line {
      height: 1px;
      width: calc(100% - 80px);
      margin-left: 40px;
      margin-right: 40px;
      background-color: #b3b3b3;
    }
    #collections-section .section-header .section-header {
      padding-top: 22px;
      font: 600 14.5px basic-sans, sans-serif;
      margin-left: 40px;
    }
    #collections-section .feature-photo-container {
      max-width: 62%;
      min-width: 400px;
      height: 1200px;
      background-color: grey;
      z-index: -1;
    }
    #collections-section .feature-photo-container img {
      width: 100%;
      height: 1200px;
      z-index: -1;
    }
    #collections-section .collection-containers {
      width: calc(100% - 40px);
      position: relative;
    }
    #collections-section .collection-containers .panel-container-allow-sliding {
      width: calc(44%);
      min-width: calc(520px);
      position: absolute;
      height: 90%;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel {
      position: sticky;
      position: -webkit-sticky;
      top: 80px;
      background-color: #fad9d2;
      width: calc(100% - 100px);
      height: calc(340px - 100px);
      padding: 50px;
      margin-top: 80px;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .attention-line {
      height: 2px;
      width: 30px;
      background-color: #333333;
      margin-bottom: 15px;
      margin-top: 10px;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      h3 {
      width: auto;
      font: 200 2.6rem Ogg-Roman, serif;
      margin-bottom: 10px;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      p {
      font: 200 1rem basic-sans, sans-serif;
      line-height: 27px;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .link-box-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 13%;
      text-align: center;
      font: 600 14.5px basic-sans, sans-serif;
      height: 40px;
      width: 100px;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .link-box-container:hover
      > .highlight-box {
      height: 30px;
      top: -20%;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .link-box-container
      .button-text {
      z-index: 10;
      color: #ff7883;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .link-box-container
      .button-text
      span {
      color: #333333;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .link-box-container
      .highlight-box {
      position: absolute;
      top: 50%;
      width: 96px;
      height: 15px;
      background-color: white;
      z-index: 0;
      -webkit-transition: height 0.2s, top 0.2s;
      /* Safari */
      transition: height 0.2s, top 0.2s;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .stitch-animation {
      position: absolute;
      width: 75px;
      height: 75px;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .stitch-animation
      .her-stitch,
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .stitch-animation
      .colour-song-stitch {
      transform: rotate(45deg);
      display: inline-block;
      background-color: white;
      position: absolute;
      margin: 0 0 10px 0;
      width: 15.8px;
      height: 2.015px;
      opacity: 1;
      animation-duration: 0.5s;
      animation-timing-function: steps(7);
      animation-play-state: paused;
      animation-fill-mode: none;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .stitch-animation
      .stitch-1 {
      animation-name: move-in-steps1;
      top: calc(0% + 6px);
      left: 0;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .stitch-animation
      .stitch-2 {
      animation-name: move-in-steps2;
      top: calc(20% + 6px);
      left: 20%;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .stitch-animation
      .stitch-3 {
      animation-name: move-in-steps3;
      top: calc(40% + 6px);
      left: 40%;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .stitch-animation
      .stitch-4 {
      animation-name: move-in-steps4;
      top: calc(60% + 6px);
      left: 60%;
    }
    #collections-section
      .collection-containers
      .panel-container-allow-sliding
      .info-panel
      .stitch-animation
      .stitch-5 {
      animation-name: move-in-steps5;
      top: calc(80% + 6px);
      left: 80%;
    }
    @keyframes move-in-steps1 {
      0% {
        opacity: 1;
      }
      16% {
        opacity: 1;
      }
      33% {
        opacity: 1;
      }
      49% {
        opacity: 1;
      }
      66% {
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      81% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    @keyframes move-in-steps2 {
      0% {
        opacity: 1;
      }
      16% {
        opacity: 1;
      }
      33% {
        opacity: 1;
      }
      49% {
        opacity: 1;
      }
      65% {
        opacity: 1;
      }
      66% {
        opacity: 0;
      }
      81% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    @keyframes move-in-steps3 {
      0% {
        opacity: 1;
      }
      16% {
        opacity: 1;
      }
      33% {
        opacity: 1;
      }
      48% {
        opacity: 1;
      }
      49% {
        opacity: 0;
      }
      66% {
        opacity: 0;
      }
      81% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    @keyframes move-in-steps4 {
      0% {
        opacity: 1;
      }
      16% {
        opacity: 1;
      }
      32% {
        opacity: 1;
      }
      33% {
        opacity: 0;
      }
      49% {
        opacity: 0;
      }
      66% {
        opacity: 0;
      }
      81% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    @keyframes move-in-steps5 {
      0% {
        opacity: 1;
      }
      15% {
        opacity: 1;
      }
      16% {
        opacity: 0;
      }
      33% {
        opacity: 0;
      }
      49% {
        opacity: 0;
      }
      66% {
        opacity: 0;
      }
      81% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    #collections-section .her-container {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: flex-start;
      margin-left: 40px;
      margin-bottom: 5%;
      z-index: 2;
    }
    #collections-section .her-container .panel-container-allow-sliding {
      left: 0;
    }
    #collections-section
      .her-container
      .panel-container-allow-sliding
      .info-panel
      p {
      width: 320px;
    }
    #collections-section
      .her-container
      .panel-container-allow-sliding
      .info-panel
      .button-text {
      margin-right: -17px;
    }
    #collections-section
      .her-container
      .panel-container-allow-sliding
      .info-panel
      .link-box-container {
      right: 55px;
    }
    #collections-section
      .her-container
      .panel-container-allow-sliding
      .info-panel
      .link-box-container
      .highlight-box {
      left: 11px;
    }
    #collections-section
      .her-container
      .panel-container-allow-sliding
      .info-panel
      .her-stitches {
      right: -20px;
      top: -22px;
    }
    #collections-section .colour-song-container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      margin-right: 40px;
    }
    #collections-section .colour-song-container .panel-container-allow-sliding {
      right: 0;
    }
    #collections-section
      .colour-song-container
      .panel-container-allow-sliding
      .info-panel
      p {
      width: 360px;
    }
    #collections-section
      .colour-song-container
      .panel-container-allow-sliding
      .info-panel
      .button-text {
      margin-right: -17px;
    }
    #collections-section
      .colour-song-container
      .panel-container-allow-sliding
      .info-panel
      .colour-song-stitch {
      left: -20px;
      top: -20px;
    }
    #collections-section
      .colour-song-container
      .panel-container-allow-sliding
      .info-panel
      .link-box-container {
      right: 60px;
    }
    #collections-section
      .colour-song-container
      .panel-container-allow-sliding
      .info-panel
      .link-box-container
      .highlight-box {
      right: -6.5px;
    }
    #collections-section
      .colour-song-container
      .panel-container-allow-sliding
      .info-panel
      .colour-song-stitches {
      left: -20px;
      top: -20px;
      transform: rotate(90deg);
    }

<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    
    <div id="collections-section">
    
        <div class="section-header">
          <div class="section-header-line">
          </div>
          <div class="section-header">Collections
          </div>
        </div>
    
        <div class="collection-containers her-container">
          <div class="panel-container-allow-sliding">
            <div class="info-panel her-panel">
              <div class="attention-line">
              </div>
              <h3>Her.</h3>
              <p>Her feminine divinity draws me like a moth to the light, it has a
                 hold on my soul and I want to laugh and cry at the same time.</p>
              <a class="link-box-container" href="https://www.reddit.com">
                <div class="button-text">Explore More</div>
                <div class="highlight-box"></div>
              </a>
    
              <div class="stitch-animation her-stitches">
                <div class="her-stitch stitch-1"></div>
                <div class="her-stitch stitch-2"></div>
                <div class="her-stitch stitch-3"></div>
                <div class="her-stitch stitch-4"></div>
                <div class="her-stitch stitch-5"></div>
              </div>
    
    
            </div>
          </div>
          <div class="feature-photo-container">
            <img src="images/collection-her-hero.jpg" alt="Grey Dress With Frills">
          </div>
        </div>
    
        <div class="collection-containers colour-song-container">
          <div class="panel-container-allow-sliding">
            <div class="info-panel colour-song">
              <div class="attention-line">
              </div>
              <h3>The Colour Song.</h3>
              <p>It is the lyrics to our childhood song, where colour is a feeling,
                 a flavour, knowing no bounds and there’s no such thing as a
                 mute button.</p>
              <a class="link-box-container" href="https://www.reddit.com">
                <div class="button-text">Explore More</div>
                <div class="highlight-box"></div>
              </a>
    
    
              <div class="stitch-animation colour-song-stitches">
                <div class="colour-song-stitch stitch-1"></div>
                <div class="colour-song-stitch stitch-2"></div>
                <div class="colour-song-stitch stitch-3"></div>
                <div class="colour-song-stitch stitch-4"></div>
                <div class="colour-song-stitch stitch-5"></div>
              </div>
    
    
            </div>
          </div>
          <div class="feature-photo-container">
            <img src="images/collection-colour-song-hero.jpg" alt="Orange Dress With Frills">
          </div>
        </div>
    
      </div>

​

Answer 1

问题是CSS动画不会简单地重置。有多个选项可以用来重置它，我已经在下面显示了在每个“重置”之后删除并重新添加动画元素的选项。

var holder = $('.her-stitches').html();
$('.her-stitches').html('').html(holder);

​

$(document).ready(function() {
   var button = $(".her-panel"); //get offset of second div
   var offset = button.offset().top - 80; //check for top property
   $(function () {
       $(window).scroll(function () {
           if ($(window).scrollTop() >= offset) {
               $(".her-stitch").css("animation-play-state","running");
               $(".her-stitch").css("animation-fill-mode","forwards");
           } else if ($(window).scrollTop() < offset) {
               var holder = $('.her-stitches').html();
               $('.her-stitches').html('').html(holder);
               $(".her-stitch").css("animation-play-state","paused");
               $(".her-stitch").css("animation-fill-mode","none");
           } 
       });
   });
});

#collections-section {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 4000px;
  background-color: rgba(0, 0, 0, .1);
}
#collections-section .section-header {
  margin-bottom: calc(30px + 1%);
}
#collections-section .section-header .section-header-line {
  height: 1px;
  width: calc(100% - 80px);
  margin-left: 40px;
  margin-right: 40px;
  background-color: #b3b3b3;
}
#collections-section .section-header .section-header {
  padding-top: 22px;
  font: 600 14.5px basic-sans, sans-serif;
  margin-left: 40px;
}
#collections-section .feature-photo-container {
  max-width: 62%;
  min-width: 400px;
  height: 1200px;
  background-color: grey;
  z-index: -1;
}
#collections-section .feature-photo-container img {
  width: 100%;
  height: 1200px;
  z-index: -1;
}
#collections-section .collection-containers {
  width: calc(100% - 40px);
  position: relative;
}
#collections-section .collection-containers .panel-container-allow-sliding {
  width: calc(44%);
  min-width: calc(520px);
  position: absolute;
  height: 90%;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel {
  position: sticky;
  position: -webkit-sticky;
  top: 80px;
  background-color: #fad9d2;
  width: calc(100% - 100px);
  height: calc(340px - 100px);
  padding: 50px;
  margin-top: 80px;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .attention-line {
  height: 2px;
  width: 30px;
  background-color: #333333;
  margin-bottom: 15px;
  margin-top: 10px;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  h3 {
  width: auto;
  font: 200 2.6rem Ogg-Roman, serif;
  margin-bottom: 10px;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  p {
  font: 200 1rem basic-sans, sans-serif;
  line-height: 27px;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .link-box-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 13%;
  text-align: center;
  font: 600 14.5px basic-sans, sans-serif;
  height: 40px;
  width: 100px;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .link-box-container:hover
  > .highlight-box {
  height: 30px;
  top: -20%;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .link-box-container
  .button-text {
  z-index: 10;
  color: #ff7883;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .link-box-container
  .button-text
  span {
  color: #333333;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .link-box-container
  .highlight-box {
  position: absolute;
  top: 50%;
  width: 96px;
  height: 15px;
  background-color: white;
  z-index: 0;
  -webkit-transition: height 0.2s, top 0.2s;
  /* Safari */
  transition: height 0.2s, top 0.2s;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .stitch-animation {
  position: absolute;
  width: 75px;
  height: 75px;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .stitch-animation
  .her-stitch,
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .stitch-animation
  .colour-song-stitch {
  transform: rotate(45deg);
  display: inline-block;
  background-color: white;
  position: absolute;
  margin: 0 0 10px 0;
  width: 15.8px;
  height: 2.015px;
  opacity: 1;
  animation-duration: 0.5s;
  animation-timing-function: steps(7);
  animation-play-state: paused;
  animation-fill-mode: none;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .stitch-animation
  .stitch-1 {
  animation-name: move-in-steps1;
  top: calc(0% + 6px);
  left: 0;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .stitch-animation
  .stitch-2 {
  animation-name: move-in-steps2;
  top: calc(20% + 6px);
  left: 20%;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .stitch-animation
  .stitch-3 {
  animation-name: move-in-steps3;
  top: calc(40% + 6px);
  left: 40%;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .stitch-animation
  .stitch-4 {
  animation-name: move-in-steps4;
  top: calc(60% + 6px);
  left: 60%;
}
#collections-section
  .collection-containers
  .panel-container-allow-sliding
  .info-panel
  .stitch-animation
  .stitch-5 {
  animation-name: move-in-steps5;
  top: calc(80% + 6px);
  left: 80%;
}
@keyframes move-in-steps1 {
  0% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  66% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  81% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes move-in-steps2 {
  0% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  81% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes move-in-steps3 {
  0% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  48% {
    opacity: 1;
  }
  49% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  81% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes move-in-steps4 {
  0% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  32% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  81% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes move-in-steps5 {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 1;
  }
  16% {
    opacity: 0;
  }
  33% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }
  81% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
#collections-section .her-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 40px;
  margin-bottom: 5%;
  z-index: 2;
}
#collections-section .her-container .panel-container-allow-sliding {
  left: 0;
}
#collections-section
  .her-container
  .panel-container-allow-sliding
  .info-panel
  p {
  width: 320px;
}
#collections-section
  .her-container
  .panel-container-allow-sliding
  .info-panel
  .button-text {
  margin-right: -17px;
}
#collections-section
  .her-container
  .panel-container-allow-sliding
  .info-panel
  .link-box-container {
  right: 55px;
}
#collections-section
  .her-container
  .panel-container-allow-sliding
  .info-panel
  .link-box-container
  .highlight-box {
  left: 11px;
}
#collections-section
  .her-container
  .panel-container-allow-sliding
  .info-panel
  .her-stitches {
  right: -20px;
  top: -22px;
}
#collections-section .colour-song-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-right: 40px;
}
#collections-section .colour-song-container .panel-container-allow-sliding {
  right: 0;
}
#collections-section
  .colour-song-container
  .panel-container-allow-sliding
  .info-panel
  p {
  width: 360px;
}
#collections-section
  .colour-song-container
  .panel-container-allow-sliding
  .info-panel
  .button-text {
  margin-right: -17px;
}
#collections-section
  .colour-song-container
  .panel-container-allow-sliding
  .info-panel
  .colour-song-stitch {
  left: -20px;
  top: -20px;
}
#collections-section
  .colour-song-container
  .panel-container-allow-sliding
  .info-panel
  .link-box-container {
  right: 60px;
}
#collections-section
  .colour-song-container
  .panel-container-allow-sliding
  .info-panel
  .link-box-container
  .highlight-box {
  right: -6.5px;
}
#collections-section
  .colour-song-container
  .panel-container-allow-sliding
  .info-panel
  .colour-song-stitches {
  left: -20px;
  top: -20px;
  transform: rotate(90deg);
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<div id="collections-section">

    <div class="section-header">
      <div class="section-header-line">
      </div>
      <div class="section-header">Collections
      </div>
    </div>

    <div class="collection-containers her-container">
      <div class="panel-container-allow-sliding">
        <div class="info-panel her-panel">
          <div class="attention-line">
          </div>
          <h3>Her.</h3>
          <p>Her feminine divinity draws me like a moth to the light, it has a
             hold on my soul and I want to laugh and cry at the same time.</p>
          <a class="link-box-container" href="https://www.reddit.com">
            <div class="button-text">Explore More</div>
            <div class="highlight-box"></div>
          </a>

          <div class="stitch-animation her-stitches">
            <div class="her-stitch stitch-1"></div>
            <div class="her-stitch stitch-2"></div>
            <div class="her-stitch stitch-3"></div>
            <div class="her-stitch stitch-4"></div>
            <div class="her-stitch stitch-5"></div>
          </div>


        </div>
      </div>
      <div class="feature-photo-container">
        <img src="images/collection-her-hero.jpg" alt="Grey Dress With Frills">
      </div>
    </div>
    </div>

  </div>

​