Проблемы с скользящей анимацией слов ⇐ Html

[Anonymous]

Я работал над анимацией CSS и сталкивался с неприятностями. Я только хочу, чтобы это взяло ширину текста.

Код: Выделить всё

.plans-wrapper-header {
width: 700px;
border: 2px solid red;
}
.plans-wrapper-title span {
font-size: 48px;
font-weight: 900;
line-height: 48px;
margin-bottom: 60px;
text-align: left;
font-family: Arial;
opacity: 1;
display: inline;
color: black;
}
.plans-wrapper-title .plans-wrapper-title-item {
display: inline;
line-height: 40px;
margin-left: 3px;
}
.plans-wrapper-title .plans-wrapper-title-item span {
font-size: 48px;
font-weight: 900;
margin-bottom: 60px;
padding: 8px;
text-align: left;
background-color: #ffda00;
position: absolute;
opacity: 0;
display: inline;
font-family: Arial;
overflow: hidden;
width: 100%;
color: black;
animation: rotateWords 30s linear infinite 0s;
}
.plans-wrapper-title .plans-wrapper-title-item span:nth-child(2) {
animation-delay: 3s;
}
.plans-wrapper-title .plans-wrapper-title-item span:nth-child(3) {
animation-delay: 6s;
}
.plans-wrapper-title .plans-wrapper-title-item span:nth-child(4) {
animation-delay: 9s;
}
.plans-wrapper-title .plans-wrapper-title-item span:nth-child(5) {
animation-delay: 12s;
}
.plans-wrapper-title .plans-wrapper-title-item span:nth-child(6) {
animation-delay: 15s;
}
.plans-wrapper-title .plans-wrapper-title-item span:nth-child(7) {
animation-delay: 18s;
}
.plans-wrapper-title .plans-wrapper-title-item span:nth-child(8) {
animation-delay: 21s;
}
.plans-wrapper-title .plans-wrapper-title-item span:nth-child(9) {
animation-delay: 24s;
}
.plans-wrapper-title .plans-wrapper-title-item span:nth-child(10) {
animation-delay: 27s;
}

@keyframes rotateWords {
0% { opacity: 1; -webkit-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; }
}

для CSS и HTML, пожалуйста, посмотрите на ручку кода выше.
Может ли кто -нибудь направить меня в правильном направлении?>

Подробнее здесь: https://stackoverflow.com/questions/578 ... -animation