1

我有一个控件，我想在关键帧动画之后在两个位置之间进行转换。有没有办法使用相同的关键帧但相反？另外，有没有办法中途停止动画并将其反转到开头？

这是我现在所拥有的（我想结合两个关键帧：

@-webkit-keyframes explode {
  0% {
-webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px);
 }
 33% {
   -webkit-transform: scale(2.0)   translate(100px, -150px);
 }
 67% {
   -webkit-transform: scale(2.0)   translate(200px, -250px);
 }
 100% {
   -webkit-transform: scale(1.0)  translate(-15px, -15px);
 }
}

@-webkit-keyframes explodeBack {
 0% {
  -webkit-transform: scale(1.0)  translate(-15px, -15px);
 }
 67% {
   -webkit-transform: scale(2.0)   translate(100px, -150px);

 }
 100% {
   -webkit-transform: scale(1.0) rotate(0deg) translate(0px, 0px);

 }
}

.leftArrowAnimateForward{
     -webkit-animation-name: explode;
     -webkit-animation-duration: 3s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-direction:normal; /* Safari and Chrome */
      -webkit-transform: scale(1.0)  translate(-15px, -15px);
}

.leftArrowAnimateBackward{
     -webkit-animation-name: explodeBack;
     -webkit-animation-duration: 3s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-direction:alternate; 
      -webkit-transform: scale(1.0)  translate(0px, 0px);
}
4

3 回答 3

0

如果将animation-iteration-count: 2、animation-direction:alternate和一个动画延迟相结合，你可以做你想做的第一件事，你会得到一个动画来播放正好相反一次。（它基本上会跳到反向动画并开始播放。）

你不能用纯 CSS 动画做你想做的第二件事，除非你定义第二组关键帧并用 JS（或悬停或其他）在类之间切换

于 2012-09-27T16:05:12.690 回答
0

如果没有直观地看到你到目前为止所拥有的东西，很难看到你试图做什么，但是检查动画填充模式。

这将允许您的动画在设置为前进时停止在最后一个关键帧上，目前我相信关键帧在完成后会回到 0。

玩一玩，让我们知道您是否成功。

于 2012-01-21T09:27:55.880 回答
0

我有同样的问题，并使用 SCSS 生成两个版本的关键帧：normal和reverse.

https://github.com/lichunbin814/scss-utils#with-reverse-version

/* mixin */

@mixin keyframe-reverse( $name, $value) {
  @keyframes #{$name}-rev {
    @each $position,
    $change in $value {
      #{ 100 -$position}% {
        @each $prop,
        $val in $change {
          #{$prop}: #{$val};
        }
      }
    }
  }
}

@mixin keyframe-normal( $name, $value) {
  @keyframes #{$name} {
    @each $position,
    $change in $value {
      #{$position}% {
        @each $prop,
        $val in $change {
          #{$prop}: #{$val};
        }
      }
    }
  }
}

@mixin keyframe-gen( $name, $value, $genReverse) {
  @include keyframe-normal( $name: $name, $value: $value);
  @if ($genReverse) {
    @include keyframe-reverse( $name: $name, $value: $value)
  }
}


/* use */

@include keyframe-gen(
  $name : "fadeIn" ,  
   $value : (
      0: (
            transform: scale(1),
            opacity: 1
      ),
      100: (
            transform: scale(0),
            opacity: 0
      ),
   ) , 
   $genReverse : true 
);

.menu {
  animation-name: fadeIn-rev;
  &.active {
    animation-name: fadeIn;
  }
}

// output css

/*
@keyframes fadeIn {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes fadeIn-rev {
  100% {
    transform: scale(1);
    opacity: 1;
  }
  0% {
    transform: scale(0);
    opacity: 0;
  }
}
*/

于 2018-08-19T01:50:16.693 回答