使用CSS关键帧进行文本翻转
我正在使用CSS关键帧动画两个单独的文本。
我面临的问题是，在100%动画完成时第一个span元素（“first text”）的文本突然出现，而不是在“first text”完成后第二个span元素的文本翻转。
null
.c--anim-btn {
height: 40px;
font: normal normal 700 1em/4em Arial, sans-serif;
overflow: hidden;
width: 200px;
background-color: #ffffff;
}
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}
.c-anim-btn {
animation: rotateWord 3s linear infinite 0s;
}
.c--anim-btn span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
@keyframes rotateWord {
0% {
margin-bottom: 0rem;
}
25% {
margin-top: 0rem;
}
40% {
margin-top: -4rem;
}
100% {
margin-top: -4rem;
}
}<div class="c--anim-btn">
<span class="c-anim-btn">First Text</span>
<span>Second Text</span>
</div>null
共有1个答案
尝试将css属性更改为以下内容，以保持动画的最终状态：
.c-anim-btn{
animation: rotateWord 3s forwards;
-webkit-animation: rotateWord 3.0s forwards
}
-
问题内容： 我做了一些谷歌搜索，这是我的答案 这里唯一的问题是镜像的中心不是对象的中心，因此也许我们需要一些JavaScript才能将对象移动到所需位置。 问题答案： 您的代码是正确的，但是有一种更简单的方法可以做到这一点： 我认为这可以解决您居中的镜像问题。 如前所述，您必须将元素设置为使用块，行内块等的显示。
-
我试着用Bulma CSS使这个块图像带有文本。我尝试了很多东西（相对，z-index等），但我没有成功为台式机或移动设备做一些很棒的东西。每一次，文本都被溢出或得到框外。我无法设置标题字符限制，所以如果可能，我也尝试在第二行使用断字。 下面是我正在寻找的示例： 以下是我的HTML： 和当前CSS（不工作）： 结果： 有没有一些关于这种事情的提示，或者Bulma的扩展？ 谢谢你的帮助！
-
问题内容： 是否可以使用CSS / CSS3镜像文本？ 具体来说，我有这个剪刀char“✂”（），我想显示左指向右。 问题答案： 您可以使用CSS转换来实现此目的。水平翻转将涉及像这样缩放div： 垂直翻转会涉及到像这样缩放div： 演示：
-
问题内容： 我有以下代码： 执行javascript函数后，动画会停止，但会突然停止。 我可以平稳地停止动画，以避免突然跳入，然后从停止的位置再次继续动画吗？ 问题答案： 您不会喜欢这个答案，但现实是CSS3动画对于实现此目的并不是真正有用。为了完成这项工作，您需要在Javascript中复制很多CSS，这会破坏点（例如，在此密切相关的答案中，例如，[更改动画CSS3的速度？）。要真正使它平稳停止
-
动画关键帧 动画关键帧是使用keyframes属性中的数组定义的。 如果关键帧内没有指定duration（持续时间），则每个关键帧的持续时间将等于动画总持续时间除以关键帧数。 Type Example Array [ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000}
-
在CSS3中，通过 animation 属性来定义动画。虽然 transition 也可以实现从一种状态到另一种状态的动画效果，但它只能控制开始和结束的两个点，功能非常有限。而 animation 除了能控制开始和结束的两个点外，还能通过关键帧来控制动画的每一步，可以实现更为复杂的动画效果。 CSS3中，animation 实现的动画由两个部分组成：首先，使用关键帧 @keyframes 来声明一