Question

我有两个css3关键帧并通过某个按钮触发，但问题是当我尝试添加新的关键帧（新类）时，转换没有顺利改变，如何使这种转换顺利进行？

.button { 
    width:50px;
    height:50px;
    background:silver;
}
.box {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    top: 10%;
    left: 10%;
}
.box {
    animation: xx 2s linear infinite;
}
.boxShake {
    animation:boxShake 2s linear infinite;
}

Answer 1

实现这一目标的一个技巧是不改变动画。

但是制作一个复合动画，以百分比形式转换X和Y.

现在，更改元素的宽度和高度，我们修改一个轴或另一个未改变的动画

的移动量

$(".button").click(function(){
	$("#mover").toggleClass("alternate");
});

.button { 
    width:50px;
    height:50px;
    background:silver;
}
.box {
    width: 100px;
    height: 100px;
    background: green;
    position: relative;
    top: 10%;
    left: 10%;
}
.box {
    animation: xx 2s linear infinite;
}
#mover {
    width: 0px;
    height: 20px;
    transition: width 2s, height 2s;
    animation: mover 2s linear infinite;
}
#mover.alternate {
    width: 5px;
    height: 0px;
}
@keyframes mover {
   0% {transform:translate(   0%,   0%);}
  10% {transform:translate(-100%,  20%);}
  20% {transform:translate( 100%,  40%);}
  30% {transform:translate(-100%,  60%);}
  40% {transform:translate( 100%,  80%);}
  50% {transform:translate(-100%, 100%);}
  60% {transform:translate( 100%,  80%);}
  70% {transform:translate(-100%,  60%);}
  80% {transform:translate( 100%,  40%);}
  90% {transform:translate(-100%,  20%);}
 100% {transform:translate(   0%,   0%);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Button</div>
<div id="mover">
<div class="box"></div>
</div>

只需使用2个元素状态的宽度和高度，以及它们之间的过渡，以使其适应您的需求

如何从一个css3关键帧平滑过渡到另一个关键帧

1 个答案: