Question

我有一个用以下css和jquery翻转的元素：

.flip {
  animation: flip 500ms ease-in-out infinite;
}


$(".flip--back").on('webkitAnimationIteration oanimationiteration msAnimationIteration animationiteration', function() {
 // flip stuff
});

我希望动画逐渐减慢。我试图通过增加翻转之间的时间来更新元素的css动画元素，如下所示：

$(".flip").on('webkitAnimationIteration oanimationiteration msAnimationIteration animationiteration', function() {
  slowCounter += 50;
  $(this).css({
   animation : `flip-back ${slowCounter}ms ease-in-out infinite`
  });
  $flipTop.css({
   animation : `flip-back ${slowCounter}ms ease-in-out infinite`
  });
  // flip code
});

计数器正在增加，但动画并没有减慢速度。任何帮助将不胜感激。

我试图逐渐减速的是原始代码（http://cssdeck.com/user/joshhunt）：

<div class="seg">
  <div class="flip-wrapper">
    <div class="flip flip--next"></div>
    <div class="flip flip--top"></div>
    <div class="flip flip--top flip--back"></div>
    <div class="flip flip--bottom"></div>
  </div>
  <h3>Seconds</h3>
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

$(function(){

  var count = 10;

  $(".flip--top, .flip--bottom").text(count);
  $(".flip--next, .flip--back").text(count + 1);

  $(".flip--back").on('webkitAnimationIteration oanimationiteration msAnimationIteration animationiteration', function() {
    count++
    $(".flip--top, .flip--bottom").text(count);
    $(".flip--next, .flip--back").text(count + 1);
  });
})

body {
  padding: 20px;
  width: 140px;
  margin: 50px auto;
  background: #EEEEEE;
}
* { box-sizing: border-box; }

.seg {
  display: inline-block;
  margin: 0 5px;
  font-family: 'Helvetica Neue', sans-serif;
}

.flip-wrapper {
  position: relative;
  height: 120px;
}

.flip {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid black;
  height: 100%;
  padding: 0 8px;
  color: #FAFAFA;
  border-radius: 6px;
  background: #444444;
  font-weight: normal;
  font-size: 100px;
  text-shadow: 0 -1px  black;
  box-shadow: 0 1px 2px rgba(0,0,0,.3),
              0 1px 0 rgba(255,255,255,.3) inset, /* top */
              0 0 1px rgba(255,255,255,.3) inset;
}

.flip--top, .flip--bottom { overflow: hidden; }

.flip--top {
  animation: flip 1000ms ease-in-out infinite;
  transform-origin: bottom;
  height: 50%;
  border-radius: 6px 6px 0 0;
  z-index: 2;
  backface-visibility: hidden;
}

.flip--back {
  animation: flip-back 1000ms ease-in-out infinite;
  line-height: 0;
  transform-origin: top;
  transform: rotateX(180deg);
  margin-top: 60px;
  border-radius: 0 0 6px 6px;
}

.flip--bottom {
  height: 50%;
  margin-top: 60px;
  border-radius: 0 0 6px 6px;
  border-top: none;
  line-height: 0;
  z-index: 1
}

h3 {
  margin: 5px 0 0 0;
  font-size: 11px;
  font-weight: normal;
  color: #bbb;
  text-shadow: 0 1px 0 #fff;
}


@-webkit-keyframes flip {
  to {
    transform: rotateX(180deg); 
  }
}

@-webkit-keyframes flip-back {
  to {
    transform: rotateX(0deg); 
  }
}

如何逐步减慢css动画？

0 个答案: