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

时间：2015-05-21 18:30:44

标签： html css animation css-animations

我正在尝试使用CSS和HTML为句子中间的单个单词设置动画。当一个新词从上面消失时，我希望这个词向下动画并淡出。我的问题是动画字后的句子的其余部分没有正确间距。如下所示，动画词与句子的其余部分重叠。

enter image description here

以下是动画的截屏视频：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将我的句子的其余部分正确地用于动画词？

3 个答案:

答案 0 :(得分：8)

您可以通过设置单个跨度的max-width动画来在纯CSS中执行此操作。这是一个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添加到动画中。的Presto！

答案 1 :(得分：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'

答案 2 :(得分：0)

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

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/

相关问题
最新问题