jquery - 循环 SkewX 增加和减少

Question

我正在寻找一种可以循环此代码的方法。

让我解释一下，元素应该增加到最大值(例如 skewX (500deg))然后回到最小值(例如 skewX (100deg))，您知道方法吗？这是我的 HTML:

<div class="wpb_raw_code wpb_content_element wpb_raw_html customSpanToBorder">
<div class="wpb_wrapper" style="transform: skewX(0deg);"> 
<span class="customLineServizi"> </span>
</div>
</div>

这是我的 jquery:

var sdegree = 0;

    jQuery(document).ready(function() {
        sdegree ++ ;
        sdegree = sdegree + 2 ;
        var srotate = "skewX(" + sdegree + "deg)";

        jQuery(".customSpanToBorder .wpb_wrapper").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
    });

Answer 1

如果您想无限期地重复此操作，那么使用 CSS @keyframes 将是最合适的解决方案。定义动画后，您可以将 animation-iteration-count 设置为 infinite。试试这个:

.customSpanToBorder .wpb_wrapper {
  background-color: #C00;
  width: 100px;
  height: 100px;
  transform: skewX(0deg);
  animation-name: skew;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes skew {
  50% {
    transform: skewX(500deg);
  }
  100% {
    transform: skewX(0deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wpb_raw_code wpb_content_element wpb_raw_html customSpanToBorder">
  <div class="wpb_wrapper" style="transform: skewX(0deg);">
    <span class="customLineServizi"> </span>
  </div>
</div>