使用 CSS 为句子中的单个单词制作动画

Question

我正在尝试使用 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 将我的句子的其余部分正确地 space 用于动画词？

Answer 1

这是一个使用 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'

Answer 2

您可以通过为各个跨度的 max-width 设置动画来在纯 CSS 中执行此操作。这是一个 CodePen，这是 CSS（为清楚起见，删除了前缀。要恢复它们，只需单击 CodePen 上的 'View Compiled' 小按钮）

.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; }
}

虽然有点老套，但确实有效！无需 JS。

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

Answer 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/

使用 CSS 为句子中的单个单词制作动画

Animate a single word in a sentence with CSS

html

css

animation

css-animations