使用 CSS 为句子中的单个单词设置动画答案

【问题标题】：Animate a single word in a sentence with CSS使用 CSS 为句子中的单个单词设置动画
【发布时间】：2015-08-03 14:08:55
【问题描述】：

我正在尝试使用 CSS 和 HTML 为句子中间的单个单词制作动画。我希望这个词向下动画并淡出，因为一个新词从上面淡入。我的问题是动画词之后的句子的其余部分的间距不正确。正如您在下面看到的，动画单词与句子的其余部分重叠。

这是动画的截屏：https://www.dropbox.com/s/svjrbqug3gjsg2s/movie.mov?dl=0

到目前为止，这是我的代码：

<html>

<head>
<link rel="stylesheet" type="text/css" href="rotate.css">
</head>

<section class="rw-wrapper">

<span>The</span>
    <div class="rw-words rw-words-1">
        <span>inspiration</span>
        <span>accountability</span>
        <span>results</span>
        <span>community</span>
        <span>experience</span>
        <span>coaching</span>
    </div>
<span>you're looking for.</span>

</section>

</html>

CSS：

.rw-wrapper{
    width: 80%;
    position: relative;
    margin: 110px auto 0 auto;
    font-family: 'Bree Serif';
    padding: 10px;
}
.rw-words{
    display: inline;
    text-indent: 2px;
}
.rw-words-1 span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: #6b969d;
    -webkit-animation: rotateWord 18s linear infinite 0s;
    -ms-animation: rotateWord 18s linear infinite 0s;
    animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
    color: #6b969d;
}
.rw-words-1 span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
    color: #6b969d; 
}
.rw-words-1 span:nth-child(4) { 
    -webkit-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s; 
    color: #6b969d;
}
.rw-words-1 span:nth-child(5) { 
    -webkit-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
    color: #6b969d;
}
.rw-words-1 span:nth-child(6) { 
    -webkit-animation-delay: 15s; 
    -ms-animation-delay: 15s; 
    animation-delay: 15s; 
    color: #6b969d;
}
@-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; }
}
@media screen and (max-width: 768px){
    .rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
    .rw-sentence { font-size: 9px; }
}

如何使用 CSS 让句子的其余部分为动画单词正确留出空间？

【问题讨论】：

这里是JSFiddle，供任何想要帮助找到解决方案的人使用。
@JeffNoel 非常感谢！
你反对javascript吗？
如果可能，我想使用 CSS。
蒂莫西·米勒似乎成功了。

标签： html css animation css-animations

【解决方案1】：

您可以在纯 CSS 中通过为各个跨度的 max-width 设置动画来完成此操作。这是CodePen，这是 CSS（为清楚起见删除了前缀。要恢复它们，只需单击 CodePen 上的“查看已编译”小按钮）

.rw-wrapper{
    width: 80%;
    position: relative;
    margin: 110px auto 0 auto;
    font-family: 'Bree Serif';
    padding: 10px;
}
.rw-words{
    display: inline-block;
    text-indent: 2px;
}
.rw-words-1 span{
    max-width: 0;
    display: inline-block;
    opacity: 0;
    overflow: hidden;
    color: #6b969d;
    margin-left: -4px;
    animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
    animation-delay: 3s;
    color: #6b969d;
}
.rw-words-1 span:nth-child(3) {
    animation-delay: 6s; 
    color: #6b969d; 
}
.rw-words-1 span:nth-child(4) {
    animation-delay: 9s; 
    color: #6b969d;
}
.rw-words-1 span:nth-child(5) {
    animation-delay: 12s; 
    color: #6b969d;
}
.rw-words-1 span:nth-child(6) {
    animation-delay: 15s; 
    color: #6b969d;
}
@keyframes rotateWord {
    0% { opacity: 0; max-width: 0;}
    2% { opacity: 0; max-width: 0; transform: translateY(-30px); }
    5% { opacity: 1; max-width: 200px; transform: translateY(5px);}
    17% { opacity: 1; max-width: 200px; transform: translateY(5px); }
    20% { opacity: 0; max-width: 0; transform: translateY(30px); }
    80% { opacity: 0; max-width: 0; }
    100% { opacity: 0; max-width: 0; }
}
@media screen and (max-width: 768px){
    .rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
    .rw-sentence { font-size: 9px; }
}

这有点hacky，但它有效！无需 JS。

我删除了position: absolute 并将max-width 添加到动画中。快！

【讨论】：

感谢您的回答！我正在对 codepen 进行一些修改，因为我希望动画单词能够在句子中垂直和水平地均匀定位。它看起来略低于句子的其余部分，并且右侧有额外的间距。有什么想法吗？
@hgwhittle 是的，所以问题实际上与inline-block 有关，其中有一些strange quirks。删除跨度之间的空格似乎已经修复了它......我更新了 CodePen。你觉得这样合适吗？

【解决方案2】：

这是一个使用 JavaScript 的解决方案：

Example Fiddle

这是运行它的代码：

JavaScript

var spans = document.querySelectorAll('.rw-words span'),
    maxwidth = 0,
    words = document.querySelector('.rw-words');
for (var i=0,l=spans.length;i<l;i++){
    console.log(i + ' width: ' + spans[i].offsetWidth)
    maxwidth = spans[i].offsetWidth > maxwidth ? spans[i].offsetWidth : maxwidth;
}
words.style.width = maxwidth + 'px'

CSS

.rw-words{
    display: inline-block;
    vertical-align: top;
    text-indent: 2px;
}

编辑

这里有一些更简洁的 JavaScript 可以达到同样的目的：

var spans = [].slice.call(document.querySelectorAll('.rw-words span')),
    words = document.querySelector('.rw-words'),
    maxwidth = Math.max.apply(null, spans.map(function (item) {
       return item.offsetWidth;
    }));
words.style.width = maxwidth + 'px'

【讨论】：

单词居中会更干净
@Moogs – 也许，但这是提问者的特权。这是一个微不足道的修复。只需将所有 span 的宽度设置为 maxwidth 并将 text-align: center 规则添加到 .rw-words span。
这似乎并没有真正解决OP的问题......它不应该改变空间的宽度以匹配单词吗？也许我误解了这个问题。
@TimothyMiller – 这又是一种设计选择。我个人不会左右摇晃句子的第二部分，因为它不仅在视觉上分散了他试图引起注意的内容（动画单词），而且还会造成眼球追踪问题和周围元素的潜在内容问题.
@TimothyMiller – 没有看到任何关于它自然地在文本中流动的信息。无论如何，修复就是修复，他有选择。我会为你清理间距和动画问题，可能会放弃 text-indent 和任何其他 margin 或 padding 规则来消除这种抖动。

【解决方案3】：

设置宽度为最大元素的宽度

var rwWords = document.querySelector('.rw-words-1');

var largest = [].slice.call(rwWords.querySelectorAll('span')).reduce(function (acc, el) {
    var len = el.textContent.trim().length;
    var cur = acc.textContent.trim().length;
    return len > cur ? el : acc;
});

rwWords.style.width = window.getComputedStyle(largest).width;

并用

将单词居中

transform: translate(-50%, 0);

JSFiddle 演示：http://jsfiddle.net/e697j5p2/1/

【讨论】：