css3 使用两个动画：第二个动画不是从第一个动画位置开始答案

【问题标题】：css3 using two animation : secound animation not starting from first animation postioncss3 使用两个动画：第二个动画不是从第一个动画位置开始
【发布时间】：2019-12-16 20:51:08
【问题描述】：

我正在从 youtube 的播放列表中学习 css3 动画，我从顶部制作了一个盒子并制作了摇摆我的问题是，当挥杆没有从第一个动画离开的地方开始时，这里是代码：

HTML：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <span>X</span>
        </div>
    </div>
</body>
</html>

CSS：

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.box {
    width: 400px;
    height: 200px;
    margin:0 auto;
    transform: translateY(100px);
    background: red;
    transform-origin: 10px 10px;
    animation: box 2s forwards,mm 1s 3s  linear forwards;
}

span{
    border:2px solid yellow;
    background-color: yellow;
}
@keyframes box {

    0%{
        transform: translateY(-200px);opacity: 0;
    }
    70%{
        transform: translateY(150px);
    }
    100%{
        transform: translateY(100px); opacity: 1;
    }
}

@keyframes mm {
    0%{
        transform: translateY(100px);transform: rotateZ(0deg);
    }
    40%{
        transform: translateY(100px);transform: rotateZ(90deg);
    }
    70%{
        transform: translateY(100px);transform: rotateZ(70deg);
    }
    100%{
        transform: translateY(100px);transform: rotateZ(75deg);
    }
}

问题出在哪里？这是我为这个动画观看的视频：CSS Animation Tutorial #11 - Animating a Pop-up

【问题讨论】：

标签： css css-animations

【解决方案1】：

你在“mm”关键帧中做错了，当你在写变换时，你在做

transform: translateY(100px);
transform: rotateZ(0deg);

并且第一个转换属性被第二个转换属性（级联）覆盖，因此这样编写可以修复它。

@keyframes mm {
   0%{
       transform: translateY(100px) rotateZ(0deg);
     }
   40%{
       transform: translateY(100px) rotateZ(90deg);
     }
   70%{
       transform: translateY(100px) rotateZ(70deg);
     }
   100%{
       transform: translateY(100px) rotateZ(75deg);
     }
}

Checkout the codepen here

【讨论】：

谢谢帮助:)