有一个css动画名为'；对于第2盒和第27盒；不能正常工作

在“

opacity:0

和

rotate（）

”之后，您在代码中看到的“我的跨度”上升，然后它必须“

scale

和

opacity:0

”，然后下降。但情况并非如此，它在“缩放和不透明度”下降之前很快就会消失

看看它是怎么工作的 我没有太多的动画经验，但我不能理解，代码必须正常工作。但它迷失了方向 我评论中的链接

@keyframes for_box2 {
    0% {
        opacity: 1;
    }
    3% {
        opacity: .5;
    }
    5% {
        opacity: .2;
        transform: rotateY(90deg);
    }
    8% {
        opacity: 0;
        transform: rotateY(180deg);
    }
    10% {
        transform: translateY(-50%);
    }
    12% {
        transform: translateY(-100%);
    }
    14% {
        transform: translateY(-150%);
    }
    16% {
        transform: translateY(-200%);
    }
    18% {
        transform: scale(.95);
    }
    20% {
        transform: scale(1);
    }
    22% {
        transform: scale(1.25);
    }
    24% {
        transform: scale(1.1);
    }
    26% {
        transform: scale(1);
        opacity: .8;
    }
    28% {
        opacity: .5;
        transform: rotateY(90deg);
    }
    30% {
        opacity: .2;
        transform: rotateY(120deg)
    }
    32% {
        opacity: 0;
        transform: rotateY(180deg)
    }
    40% {
        animation-timing-function: ease-out;
        transform: translateX(-50%);
        transform: rotateY(180deg);
    }
    48% {
        transform: translateX(-120%);
    }
    56% {
        opacity: 1;
        transform: rotateY(0deg);
    }
    64% {
        opacity: 0;
        transform: rotateY(180deg);
    }
    72% {
        transform: translateY(-200%);
        animation-timing-function: cubic-bezier(.01,1.42,.02,1);
    }
    80% {
        opacity: 1;
        transform: rotateY(0deg);
    }
    88% {
        opacity: 0;
        transform: rotateY(180deg);
    }
    94% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(.01,1.42,.02,1);
    }
    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

---

您需要将所有转换放在同一个转换中，否则您只需覆盖它们：

正文{
保证金：0；
位置：相对位置；
溢出x：隐藏；
框大小：边框框；
}
.包装纸{
过渡：.7s；
边框：实心357ae8；
变换：旋转（-.5度）；
填充：0！重要；
}
.包装，里面{
背景：线性梯度（288deg，rgba（233,26,93,0.8883928571428571）0%，rgba（255,241,29,0.9220063025210083）36%，rgba（231235,70,1）51%，rgba（255,247,117,1）68%，rgba（156,233,247,0.9472163856218）91%）；
边框：实心357ae8；
背景大小：400%400%；
变换：旋转（.5度）；
显示：块；
宽度：350px；
高度：500px；
动画：渐变15s轻松无限；
}
.包装.内跨{
显示：块；
宽度：40%；
身高：30%；
位置：绝对位置；
}
.包装。内span.box2{
底部：5%；
右：5%；
背景：url（'https://svgur.com/i/EAo.svg")不重复;；
-webkit背景尺寸：封面；
背景尺寸：封面；
背景位置：中心；
动画：对于_box2线性45s 1s无限；
}
@关键帧渐变{
0% {
背景位置：0%50%
}
50% {
背景职位：100%50%
}
100% {
背景位置：0%50%
}
}
@_box2的关键帧{
0% {
不透明度：1；
}
3% {
不透明度：.5；
}
5% {
不透明度：.2；
变换：translateX（0）translateY（0）rotateY（90度）；
}
8% {
不透明度：0；
变换：translateX（0）translateY（0）rotateY（180度）；
}
10% {
变换：translateX（0）translateY（-50%）rotateY（180度）；
}
12% {
变换：translateX（0）translateY（-100%）rotateY（180度）；
}
14% {
变换：translateX（0）translateY（-150%）rotateY（180度）；
}
16% {
变换：translateX（0）translateY（-200%）rotateY（180度）；
}
18% {
变换：translateX（0）translateY（-200%）旋转（180度）刻度（.95）；
}
20% {
变换：translateX（0）translateY（-200%）旋转（180度）刻度（1）；
}
22% {
变换：translateX（0）translateY（-200%）rotateY（180度）标度（1.25）；
}
24% {
变换：translateX（0）translateY（-200%）rotateY（180度）标度（1.1）；
}
26% {
变换：translateX（0）translateY（-200%）旋转（180度）刻度（1）；
不透明度：.8；
}
28% {
不透明度：.5；
变换：translateX（0）translateY（-200%）rotateY（90度）；
}
30% {
不透明度：.2；
变换：translateX（0）translateY（-200%）rotateY（120度）；
}
32% {
不透明度：0；
变换：translateX（0）translateY（-200%）rotateY（180度）；
}
40% {
动画计时功能：放松；
变换：translateX（-50%）translateY（-200%）rotateY（180度）；
}
48% {
变换：translateX（-120%）translateY（-200%）rotateY（180度）；
}
56% {
不透明度：1；
变换：translateX（-120%）translateY（-200%）rotateY（0度）；
}
64% {
不透明度：0；
变换：translateX（-120%）translateY（-200%）rotateY（180度）；
}
72% {
变换：translateX（-120%）translateY（-200%）rotateY（180度）；
动画计时功能：立方贝塞尔（.01,1.42,02,1）；
}
80% {
不透明度：1；
变换：translateX（-120%）translateY（-200%）rotateY（0度）；
}
88% {
不透明度：0；
变换：translateX（-120%）translateY（-200%）rotateY（180度）；
}
94% {
变换：translateX（-120%）translateY（0）旋转（180度）；
动画计时功能：立方贝塞尔（.01,1.42,02,1）；
}
100% {
变换：translateX（-120%）translateY（0）旋转（0度）；
不透明度：1；
}
}