CSS字体旋转动画

我们将创建一个字体效果。一些句子和旋转的一部分。我们将“交换”的某些词,句子使用CSS动画。
一个主要包装一个包含一级h2标题跨越和两个部门的旋转的话:

<section class="rw-wrapper">
    <h2 class="rw-sentence">
        <span>Real poetry is like</span>
        <span>creating</span>
        <div class="rw-words rw-words-1">
            <span>breathtaking moments</span>
            <span>lovely sounds</span>
            <span>incredible magic</span>
            <span>unseen experiences</span>
            <span>happy feelings</span>
            <span>beautiful butterflies</span>
        </div>
        <br />
        <span>with a silent touch of</span>
        <div class="rw-words rw-words-2">
            <span>sugar</span>
            <span>spice</span>
            <span>colors</span>
            <span>happiness</span>
            <span>wonder</span>
            <span>happiness</span>
        </div>
    </h2>
</section>

CSS3
首先,我们将风格主要包装和中心的页面:
.rw-wrapper{
    width: 80%;
    position: relative;
    margin: 110px auto 0 auto;
    font-family: 'Bree Serif';
    padding: 10px;
}
我们将会添加一些文本的影子在标题的所有元素:
.rw-sentence{
    margin: 0;
    text-align: left;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
并将一些特定的文本样式添加到跨越:
.rw-sentence span{
    color: #444;
    white-space: nowrap;
    font-size: 200%;
    font-weight: normal;
}
显示为内联元素
.rw-words{
    display: inline;
    text-indent: 10px;
}
每个跨度在rw-words div将绝对定位,我们会隐藏任何溢出:
.rw-words span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    width: 100%;
    color: #6b969d;
}
现在,我们将运行两个动画。如前所述,我们将运行相同的动画的横跨在一个div,只是不同的延迟:
.rw-words-1 span{
    animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
    animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
    animation-delay: 3s; 
    color: #6b889d;
}
.rw-words span:nth-child(3) { 
    animation-delay: 6s; 
    color: #6b739d; 
}
.rw-words span:nth-child(4) { 
    animation-delay: 9s; 
    color: #7a6b9d;
}
.rw-words span:nth-child(5) { 
    animation-delay: 12s; 
    color: #8d6b9d;
}
.rw-words span:nth-child(6) {  
    animation-delay: 15s; 
    color: #9b6b9d;
}
@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
    25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
单词在第二个div的动画会淡入。我们添加了一个这里的关键帧一步百分比,因为我们希望这些话出现一点晚于第一的词:
@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}