CSS动画错误

Question

我正在尝试创建一个仅 CSS3 的动画，它使一个跨度（一个字母）看起来像来回摆动然后在转动时从屏幕上掉下来。这是我的 CSS：

@-webkit-keyframes swing { 
    10% { -webkit-transform: rotate(15deg); } 
    15% { -webkit-transform: rotate(-10deg); } 
    20% { -webkit-transform: rotate(5deg); } 
    25% { -webkit-transform: rotate(-5deg); } 
    30% { -webkit-transform: rotate(2deg); } 
    35% { -webkit-transform: rotate(-1deg); } 
    40% { -webkit-transform: rotate(0deg); } 
    75% { -webkit-transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
    100% { -webkit-transform: rotate(15deg); -webkit-transform:translate(0, 1500px); }
} 
@keyframes swing { 
    10% { transform: rotate(15deg); } 
    15% { transform: rotate(-10deg); } 
    20% { transform: rotate(5deg); } 
    25% { transform: rotate(-5deg); } 
    30% { transform: rotate(2deg); } 
    35% { transform: rotate(-1deg); } 
    40% { transform: rotate(0deg); } 
    75% { transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
    100% { transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
}
.animateone {
    display: inline-block;
    -webkit-animation-name: swing; 
    animation-name: swing; 
    -webkit-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation-duration: 3s; 
    animation-duration: 3s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
}

结果如下：Result

为什么 'A' 下落时不旋转？

Answer 1

您应该将您的转换写入单个语句：

@keyframes swing { 
    75% { transform: rotate(700deg) translate(0, 1500px); }
    100% { transform: rotate(700deg) translate(0, 1500px); }
}

已更新

如果想在下落时旋转，应该分别使用两个动画：

@keyframes translate { 
    10% { transform: translate(0, 0); } 
    15% { transform: translate(0, 0); } 
    20% { transform: translate(0, 0); } 
    25% { transform: translate(0, 0); } 
    30% { transform: translate(0, 0); } 
    35% { transform: translate(0, 0); } 
    40% { transform: translate(0, 0); } 
    75% { transform: translate(0, 1500px); }
    100% { transform: translate(0, 1500px); }
}

@keyframes rotate { 
    10% { transform: rotate(15deg); } 
    15% { transform: rotate(-10deg); } 
    20% { transform: rotate(5deg); } 
    25% { transform: rotate(-5deg); } 
    30% { transform: rotate(2deg); } 
    35% { transform: rotate(-1deg); } 
    40% { transform: rotate(0deg); } 
    75% { transform: rotate(700deg); }
    100% { transform: rotate(700deg); }
}

.rotate {
    display: inline-block;
    animation-name: rotate; 
    transform-origin: top center; 
    animation-duration: 5s; 
    animation-fill-mode: both; 
}

.translate {
    display: inline-block;
    animation-name: translate; 
    transform-origin: top center; 
    animation-duration: 5s; 
    animation-fill-mode: both; 
}

<header>
    <h1>W.I.P.<?h1>
    <h2>
        A Text
        <span class="translate">
            <span class="rotate">A</span>
        </span>
        dventure
    </h2>
</header>

Answer 2

首先，一次只能设置一个变换属性。如果要合并 2，请将它们设置在逗号分隔列表中。（ROX 对此是正确的）。

其次，变换的顺序很重要。如果您希望跨度在旋转时移动，则顺序必须是您在代码段中看到的顺序。

我还更改了变换原点，使其在视觉上更加流畅，出于同样的原因，我将动画更改为线性。 Nut当然可以随意调整

@-webkit-keyframes swing { 
    10% { transform: translate(0, 0px) rotate(15deg); transform-origin: top center;} 
    15% { transform: translate(0, 0px) rotate(-10deg); } 
    20% { transform: translate(0, 0px) rotate(5deg); } 
    25% { transform: translate(0, 0px) rotate(-5deg); } 
    30% { transform: translate(0, 0px) rotate(2deg); } 
    35% { transform: translate(0, 0px) rotate(-1deg); } 
    40% { transform: translate(0, 0px) rotate(0deg); transform-origin: top center;} 
    40% { transform: translate(0, 0px) rotate(0deg); transform-origin: center center;} 
    75% { transform: translate(0, 150px) rotate(375deg);  }
    100% { transform: translate(0, 150px) rotate(375deg);  transform-origin: top center;}
} 
@keyframes swing { 
    10% { transform: translate(0, 0px) rotate(15deg); transform-origin: top center;} 
    15% { transform: translate(0, 0px) rotate(-10deg); } 
    20% { transform: translate(0, 0px) rotate(5deg); } 
    25% { transform: translate(0, 0px) rotate(-5deg); } 
    30% { transform: translate(0, 0px) rotate(2deg); } 
    35% { transform: translate(0, 0px) rotate(-1deg); } 
    40% { transform: translate(0, 0px) rotate(0deg); transform-origin: top center;} 
    40% { transform: translate(0, 0px) rotate(0deg); transform-origin: center center;} 
    75% { transform: translate(0, 150px) rotate(375deg);  }
    100% { transform: translate(0, 150px) rotate(375deg);  transform-origin: top center;}
}
.animateone {
    display: inline-block;
    -webkit-animation: swing 3s infinite linear; 
    animation: swing 3s infinite linear; 
    transform-origin: top center; 
}

<span class="animateone">A</a>

CSS动画错误

CSS Animation Error

html

css

animation

css-animations