Question

我正在尝试使用下一个代码制作动画：

.slogan {
    width: 73.5%;
    color: black;
}
.left-slogan {
    font-size: 7vw;
    font-weight: bold;
}
.left-slogan > p {
    line-height: 0;
}
.left-slogan {
    text-align: right;
    margin-right: 24px;
}
.right-slogan span {
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: black;
    font-size: 7vw;
    font-weight: bold;
    -webkit-animation: rotateWord 15s linear infinite 0s;
    -ms-animation: rotateWord 15s linear infinite 0s;
    animation: rotateWord 15s linear infinite 0s;
}
.right-slogan span:nth-child(1) {
    -webkit-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
}
.right-slogan span:nth-child(2) {
    -webkit-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}
.right-slogan span:nth-child(3) {
    -webkit-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.right-slogan span:nth-child(4) {
    -webkit-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s;
}
.right-slogan span:nth-child(5) {
    -webkit-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
@-webkit-keyframes rotateWord {
    0% {
        opacity: 0;
    }
    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    20% {
        opacity: 0;
        -webkit-transform: translateY(30px);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-ms-keyframes rotateWord {
    0% {
        opacity: 0;
    }
    2% {
        opacity: 0;
        -ms-transform: translateY(-30px);
    }
    5% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }
    17% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }
    20% {
        opacity: 0;
        -ms-transform: translateY(30px);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes rotateWord {
    0% {
        opacity: 0;
    }
    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    20% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

<div class="slogan">
    <div class="left-slogan">
        <p>We are
            <div class="right-slogan"> 
                <span id="aux-word">testing</span>
                <span id="aux-word">experiencing</span>
                <span id="aux-word">checking</span>
                <span id="aux-word">solving</span>
            </div>
        </p>
        <p>a bug</p>
    </div>
</div>

出于任何原因，动画文本不会位于“我们是”字样的右侧，即使它是动画的。

有人能让我知道怎么解决吗？

感谢您的建议

Answer 1

进行如下更改：

@-webkit-keyframes rotateWord {
    0% {
        opacity: 0;
    }
    2% {
        opacity: 0;
        -webkit-transform: translateY(-200%);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateY(-180%);
    }
    17% {
        opacity: 1;
        -webkit-transform: translateY(-140%);
    }
    20% {
        opacity: 0;
        -webkit-transform: translateY(-140%);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

在“我们是”和动画文字之间添加一个空格：

        <span id="aux-word">&nbsp;testing</span>
        <span id="aux-word">&nbsp;experiencing</span>
        <span id="aux-word">&nbsp;checking</span>
        <span id="aux-word">&nbsp;solving</span>

Answer 2

right-slogan div充当块元素。如果你可以改为span，它将与其他文本内联。下面的几个其他CSS调整可以很好地布局（删除了overflow:hidden并添加了margin-left）。

.slogan {
    width: 73.5%;
    color: black;
}
.left-slogan {
    font-size: 7vw;
    font-weight: bold;
}
.left-slogan > p {
    line-height: 0;
}
.left-slogan {
    text-align: right;
    margin-right: 24px;
}

.right-slogan span {
    position: absolute;
    opacity: 0;
    margin-left: 10px;
    color: black;
    font-size: 7vw;
    font-weight: bold;
    -webkit-animation: rotateWord 15s linear infinite 0s;
    -ms-animation: rotateWord 15s linear infinite 0s;
    animation: rotateWord 15s linear infinite 0s;
}
.right-slogan span:nth-child(1) {
    -webkit-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
}
.right-slogan span:nth-child(2) {
    -webkit-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
}
.right-slogan span:nth-child(3) {
    -webkit-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.right-slogan span:nth-child(4) {
    -webkit-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s;
}
.right-slogan span:nth-child(5) {
    -webkit-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
@-webkit-keyframes rotateWord {
    0% {
        opacity: 0;
    }
    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }
    20% {
        opacity: 0;
        -webkit-transform: translateY(30px);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-ms-keyframes rotateWord {
    0% {
        opacity: 0;
    }
    2% {
        opacity: 0;
        -ms-transform: translateY(-30px);
    }
    5% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }
    17% {
        opacity: 1;
        -ms-transform: translateY(0px);
    }
    20% {
        opacity: 0;
        -ms-transform: translateY(30px);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes rotateWord {
    0% {
        opacity: 0;
    }
    2% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    5% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    17% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    20% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

<div class="slogan">
    <div class="left-slogan">
        <p>We are
            <span class="right-slogan"> 
                <span id="aux-word">testing</span>
                <span id="aux-word">experiencing</span>
                <span id="aux-word">checking</span>
                <span id="aux-word">solving</span>
            </span>
        </p>
        <p>a bug</p>
    </div>
</div>

Answer 3

在CSS中进行以下更改以覆盖默认浏览器css

body {
margin: 0px; // to overwrite any margin given by browsers
}
.left-slogan > p {  // removed line-height style
-webkit-margin-after: 0px; // to overwrite any margin given by webkit  browsers
-webkit-margin-before: 0px;
}
.right-slogan span {
position: absolute;
opacity: 0;
overflow: hidden;
color: black;
font-size: 7vw;
font-weight: bold;
-webkit-animation: rotateWord 15s linear infinite 0s;
-ms-animation: rotateWord 15s linear infinite 0s;
animation: rotateWord 15s linear infinite 0s;
top: 0;  // added top position to zero
}

动画定位不正确

3 个答案: