如何在动画文本旁边浮动一个单词

Question

我是一个全新的CSS3动画文字，我有两个问题我无法理解。

问题1： 我一直试图在我的动画文字旁边放一个常规单词，所以它只用一句话。动画单词将接近句子的结尾，并根据单词的长度占用需求空间。

  

Janie是一个可爱的女孩，因为她（动画文字）很酷。

问题2： 当我为总共12个动画词添加额外的单词时，我的第二个问题开始了。这引起了循环问题，出现在彼此之上的单词我不确定在关键帧方面要改变什么以使单词全部循环它们应该如何循环。

此时任何帮助或推动正确的方向都将非常有用。这是fiddle

先谢谢了！

HTML：

<section class="wrapper">

  <h2 class="sentence">Janie is a lovely girl because she is
    <div class="slidingVertical">
    <span>amazing</span>
    <span>beautiful</span>
    <span>cute</span>
    <span>honest</span>
    <span>cool</span>
    <span>brave</span>
    <span>wild</span>
    <span>interesting</span>
    <span>local</span>
    <span>sexy</span>
    <span>intelligent</span>
    <span>exotic</span>
    </div>

 <p>
  and cool. 
 </p>
  </h2>


</section>

CSS：

/*Heading1*/
h1{
    color: #fff;
    font-size: 44px;
    margin-top: 40px;
    text-align: center;
}
/*Sentence*/
.sentence{
     color: #222;
     font-size: 30px;
     text-align: left;
}
/*Wrapper*/
.wrapper{
    font-family: 'Raleway', sans-serif;
    margin: 100px auto;
    padding: 40px 40px;
    position: relative;
    width: 70%;
}

/*Vertical Sliding*/
.slidingVertical{
    display: inline;
    text-indent: 8px;
}
.slidingVertical span{
    animation: topToBottom 10.5s linear infinite 0s;
    -ms-animation: topToBottom 10.5s linear infinite 0s;
    -webkit-animation: topToBottom 10.5s linear infinite 0s;
    color: #000;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.slidingVertical span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
    animation-delay: 12s;
    -ms-animation-delay: 12s;
    -webkit-animation-delay: 12s;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: translateY(-50px); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateY(-50px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: translateY(-50px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

/*Horizontal Sliding*/
.slidingHorizontal{
    display: inline;
    text-indent: 8px;
}
.slidingHorizontal span{
    animation: leftToRight 12.5s linear infinite 0s;
    -ms-animation: leftToRight 12.5s linear infinite 0s;
    -webkit-animation: leftToRight 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.slidingHorizontal span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.slidingHorizontal span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.slidingHorizontal span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.slidingHorizontal span:nth-child(5){
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*leftToRight Animation*/
@-moz-keyframes leftToRight{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: translateX(-50px); }
    10% { opacity: 1; -moz-transform: translateX(0px); }
    25% { opacity: 1; -moz-transform: translateX(0px); }
    30% { opacity: 0; -moz-transform: translateX(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes leftToRight{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateX(-50px); }
    10% { opacity: 1; -webkit-transform: translateX(0px); }
    25% { opacity: 1; -webkit-transform: translateX(0px); }
    30% { opacity: 0; -webkit-transform: translateX(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes leftToRight{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: translateX(-50px); }
    10% { opacity: 1; -ms-transform: translateX(0px); }
    25% { opacity: 1; -ms-transform: translateX(0px); }
    30% { opacity: 0; -ms-transform: translateX(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

/*FadeIn*/
.fadeIn{
    display: inline;
    text-indent: 8px;
}
.fadeIn span{
    animation: fadeEffect 12.5s linear infinite 0s;
    -ms-animation: fadeEffect 12.5s linear infinite 0s;
    -webkit-animation: fadeEffect 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.fadeIn span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: translateY(0px); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateY(0px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: translateY(0px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

/*Vertical Flip*/
.verticalFlip{
    display: inline;
    text-indent: 8px;
}
.verticalFlip span{
    animation: vertical 12.5s linear infinite 0s;
    -ms-animation: vertical 12.5s linear infinite 0s;
    -webkit-animation: vertical 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.verticalFlip span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.verticalFlip span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.verticalFlip span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.verticalFlip span:nth-child(5){
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*Vertical Flip Animation*/
@-moz-keyframes vertical{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: rotateX(180deg); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0;}
}
@-webkit-keyframes vertical{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: rotateX(180deg); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes vertical{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: rotateX(180deg); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

/*Horizontal Flip*/
.horizontalFlip{
    display: inline;
    text-indent: 8px;
}
.horizontalFlip span{
    animation: horizontal 12.5s linear infinite 0s;
    -ms-animation: horizontal 12.5s linear infinite 0s;
    -webkit-animation: horizontal 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.horizontalFlip span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.horizontalFlip span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.horizontalFlip span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.horizontalFlip span:nth-child(5){
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*Horizontal Flip Animation*/
@-moz-keyframes horizontal{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: rotateY(180deg); }
    10% { opacity: 1; -moz-transform: translateX(0px); }
    25% { opacity: 1; -moz-transform: translateX(0px); }
    30% { opacity: 0; -moz-transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0;}
}
@-webkit-keyframes horizontal{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: rotateY(180deg); }
    10% { opacity: 1; -webkit-transform: translateX(0px); }
    25% { opacity: 1; -webkit-transform: translateX(0px); }
    30% { opacity: 0; -webkit-transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes horizontal{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: rotateY(180deg); }
    10% { opacity: 1; -ms-transform: translateX(0px); }
    25% { opacity: 1; -ms-transform: translateX(0px); }
    30% { opacity: 0; -ms-transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

/*AntiClockWise Effect*/
.antiClock{
    display: inline;
    text-indent: 8px;
}
.antiClock span{
    animation: anti 12.5s linear infinite 0s;
    -ms-animation: anti 12.5s linear infinite 0s;
    -webkit-animation: anti 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.antiClock span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.antiClock span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.antiClock span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.antiClock span:nth-child(5){
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*AntiClockWise Effect Animation*/
@-moz-keyframes anti{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: rotateX(180deg); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0;}
}
@-webkit-keyframes anti{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: rotate(180deg); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes anti{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: rotate(180deg); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

/*ClockWise Effect*/
.clockWise{
    display: inline;
    text-indent: 8px;
}
.clockWise span{
    animation: clock 12.5s linear infinite 0s;
    -ms-animation: clock 12.5s linear infinite 0s;
    -webkit-animation: clock 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.clockWise span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.clockWise span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.clockWise span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.clockWise span:nth-child(5){
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

.clockWise span:nth-child(6){
    animation-delay: 11s;
    -ms-animation-delay: 11s;
    -webkit-animation-delay: 11s;
}

/*ClockWise Effect Animation*/
@-moz-keyframes clock{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: rotate(-180deg); }
    10% { opacity: 1; -moz-transform: translateX(0px); }
    25% { opacity: 1; -moz-transform: translateX(0px); }
    30% { opacity: 0; -moz-transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0;}
}
@-webkit-keyframes clock{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: rotate(-180deg); }
    10% { opacity: 1; -webkit-transform: translateX(0px); }
    25% { opacity: 1; -webkit-transform: translateX(0px); }
    30% { opacity: 0; -webkit-transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes clock{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: rotate(-180deg); }
    10% { opacity: 1; -ms-transform: translateX(0px); }
    25% { opacity: 1; -ms-transform: translateX(0px); }
    30% { opacity: 0; -ms-transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

/*Pop Effect*/
.popEffect{
    display: inline;
    text-indent: 8px;
}
.popEffect span{
    animation: pop 12.5s linear infinite 0s;
    -ms-animation: pop 12.5s linear infinite 0s;
    -webkit-animation: pop 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.popEffect span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.popEffect span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.popEffect span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.popEffect span:nth-child(5){
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*Pop Effect Animation*/
@-moz-keyframes pop{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0;}
}
@-webkit-keyframes pop{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px);}
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes pop{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

/*Push Effect*/
.pushEffect{
    display: inline;
    text-indent: 8px;
}
.pushEffect span{
    animation: push 12.5s linear infinite 0s;
    -ms-animation: push 12.5s linear infinite 0s;
    -webkit-animation: push 12.5s linear infinite 0s;
    color: #00abe9;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.pushEffect span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.pushEffect span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.pushEffect span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.pushEffect span:nth-child(5){
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*Push Effect Animation*/
@-moz-keyframes push{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }
    10% { opacity: 1; -moz-transform: translateX(0px); }
    25% { opacity: 1; -moz-transform: translateX(0px); }
    30% { opacity: 0; -moz-transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0;}
}
@-webkit-keyframes push{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform:rotate(0deg) scale(2) skew(0deg) translate(0px);}
        10% { opacity: 1; -webkit-transform: translateX(0px); }
    25% { opacity: 1; -webkit-transform: translateX(0px); }
    30% { opacity: 0; -webkit-transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes push{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); }
    10% { opacity: 1; -ms-transform: translateX(0px); }
    25% { opacity: 1; -ms-transform: translateX(0px); }
    30% { opacity: 0; -ms-transform: translateX(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
/*Footer*/
h3{
    color: #fff;
    font-size: 30px;
    margin-top: 20px;
    text-align: center;
}

Answer 1

您需要将所有主要元素设置为内联。

例外是需要阻止的范围，以便能够使容器自动调整。

动画需要及时重叠。

.sentence {
  display: inline-block;
  verflow: hidden;
  height: 2em;
  vertical-align: top;
}

.sentence p {
  display: inline-block;
}

.slidingVertical {
  display: inline-block;
  vertical-align: text-top;
}

.slidingVertical span {
  display: block;
  height: 30px;
  margin-bottom: -30px;
  overflow: hidden;
}


.slidingVertical span {
  animation: elements 10s infinite linear;
}
.slidingVertical span:nth-child(1) {
  animation-delay: -1s;
}
.slidingVertical span:nth-child(2) {
  animation-delay: -2s;
}
.slidingVertical span:nth-child(3) {
  animation-delay: -3s;
}
.slidingVertical span:nth-child(4) {
  animation-delay: -4s;
}
.slidingVertical span:nth-child(5) {
  animation-delay: -5s;
}
.slidingVertical span:nth-child(6) {
  animation-delay: -6s;
}
.slidingVertical span:nth-child(7) {
  animation-delay: -7s;
}
.slidingVertical span:nth-child(8) {
  animation-delay: -8s;
}
.slidingVertical span:nth-child(9) {
  animation-delay: -9s;
}
.slidingVertical span:nth-child(10) {
  animation-delay: -10s;
}

@keyframes elements {
   0% {
     opacity: 0;
     max-width: 10px;
   }
   5%, 10% {
     opacity: 1;
     max-width: 400px;
   }
   15%, 100% {
     opacity: 0;
     max-width: 10px;
   }
}

<section class="wrapper">
  <h2 class="sentence">Janie is a 
    <div class="slidingVertical">
    <span>cute</span>
    <span>wild</span>
    <span>amazingly cute</span>
    <span>very beatiful and amazingly cute</span>
    <span>beautiful</span>
    <span>honest</span>
    <span>cool</span>
    <span>brave</span>
    <span>interesting</span>
    <span>local</span>
    </div>
    <p>girl</p>
  </h2>
</section>