CODEWITHSUNDEEP
cssrotationcpu-word
micks88
micks88

Reputation: 57

Rotating words CSS

I am trying to do a really simple rotating word thing based on CSS. I have two questions though:

1) How do I make the fade quicker at the end? The words overlap in a way that I don't like at the moment
2) If a rotating word is long it messes and overlaps with the next words. I have made some spaces to make room for this, but surely there must be a better way?

Here is a jsfiddle.

https://jsfiddle.net/cqrauey4/

/*/
	ROTATING WORDS
	/*/

.rw-words{
	display: inline;
	text-indent: 10px;
}
.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: auto;
	color: #0f269e;
}
.rw-words-1 span{
	-webkit-animation: rotateWordsFirst 14s linear infinite 0s;
	-ms-animation: rotateWordsFirst 14s linear infinite 0s;
	animation: rotateWordsFirst 14s linear infinite 0s;
}
}
.rw-words span:nth-child(1) { 
    -webkit-animation-delay: 0s; 
	-ms-animation-delay: 0s; 
	animation-delay: 0s; 
	color: #0f269e;
}

.rw-words span:nth-child(2) { 
    -webkit-animation-delay: 2s; 
	-ms-animation-delay: 2s; 
	animation-delay: 2s; 
	color: #0f269e;
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 4s; 
	-ms-animation-delay: 4s; 
	animation-delay: 4s; 
	color: #0f269e;	
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
	color: #0f269e;
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 8s; 
	-ms-animation-delay: 8s; 
	animation-delay: 8s; 
	color: #0f269e;
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 10s; 
	-ms-animation-delay: 10s; 
	animation-delay: 10s; 
	color: #0f269e;
}

.rw-words span:nth-child(7) { 
    -webkit-animation-delay: 12s; 
	-ms-animation-delay: 12s; 
	animation-delay: 12s; 
	color: #0f269e;
}
}
@-webkit-keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-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; }
}
@-ms-keyframes rotateWordsFirst {
    0% { opacity: 1; -ms-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; }
}
@keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; 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; }
}
}
@media screen and (max-width: 768px){
	.rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
	.rw-sentence { font-size: 9px; }
}
    <span>The boy
        <div class="rw-words rw-words-1">
            <span>sees </span>
            <span>wants </span>
            <span>uses </span>
            <span>finds </span>
            <span>needs </span>
            <span>tries </span>
            <span>loves </span>
        </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the girl.</span>

Upvotes: 1

Views: 357

Answers (2)

johannchopin
johannchopin

Reputation: 14873

I advise you to make several modifications in your code. First put the words the girl. in a span tag to easily manipulate it. Then apply some css to it to have the space for the animated words using padding-left just like this:

.rw-words{
	display: inline;
}

#girlWord {
  margin-left: 40px;  /* <-- Add space for the animated words  */
}

.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: auto;
	color: #0f269e;
}
.rw-words-1 span{
	animation: rotateWordsFirst 14s linear infinite 0s;
}

.rw-words span:nth-child(1) { 
    -webkit-animation-delay: 0s; 
	-ms-animation-delay: 0s; 
	animation-delay: 0s; 
	color: #0f269e;
}

.rw-words span:nth-child(2) { 
    -webkit-animation-delay: 2s; 
	-ms-animation-delay: 2s; 
	animation-delay: 2s; 
	color: #0f269e;
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 4s; 
	-ms-animation-delay: 4s; 
	animation-delay: 4s; 
	color: #0f269e;	
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
	color: #0f269e;
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 8s; 
	-ms-animation-delay: 8s; 
	animation-delay: 8s; 
	color: #0f269e;
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 10s; 
	-ms-animation-delay: 10s; 
	animation-delay: 10s; 
	color: #0f269e;
}

.rw-words span:nth-child(7) { 
    -webkit-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
    color: #0f269e;
}

@keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 0; height: 60px; }
	  25% { opacity: 0; height: 60px; }
    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; }
}
<span>The boy
  <div class="rw-words rw-words-1">
    <span>sees </span>
    <span>wants </span>
    <span>uses </span>
    <span>finds </span>
    <span>needs </span>
    <span>tries </span>
    <span>loves </span>
  </div>
  <span id="girlWord">the girl.</span> <!-- Wrap the word in a span -->
</span>

Upvotes: 1

Moob
Moob

Reputation: 16214

Without JS (or possibly some amazing CSS wizardry) you're going to struggle with the spacing for the 'rotating' words. So instead why not make a feature of it? EG:

.rw-words {
  display: inline-block;
  border: 2px solid blue;
  border-width: 0 0 2px 0;
  height: 1.1em;
  width: 4em;
  vertical-align: middle;
  overflow: hidden;
  position: relative;
}

.rw-words span {
  display: block;
  position: absolute;
  bottom: -100%;
  opacity: 0;
  overflow: hidden;
  width: auto;
  color: #0f269e;
}

.rw-words-1 span {
  -webkit-animation: rotateWordsFirst 14s linear infinite 0s;
  -ms-animation: rotateWordsFirst 14s linear infinite 0s;
  animation: rotateWordsFirst 14s linear infinite 0s;
}

.rw-words span:nth-child(1) {
  -webkit-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
  color: #0f269e;
}

.rw-words span:nth-child(2) {
  -webkit-animation-delay: 2s;
  -ms-animation-delay: 2s;
  animation-delay: 2s;
  color: #0f269e;
}

.rw-words span:nth-child(3) {
  -webkit-animation-delay: 4s;
  -ms-animation-delay: 4s;
  animation-delay: 4s;
  color: #0f269e;
}

.rw-words span:nth-child(4) {
  -webkit-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #0f269e;
}

.rw-words span:nth-child(5) {
  -webkit-animation-delay: 8s;
  -ms-animation-delay: 8s;
  animation-delay: 8s;
  color: #0f269e;
}

.rw-words span:nth-child(6) {
  -webkit-animation-delay: 10s;
  -ms-animation-delay: 10s;
  animation-delay: 10s;
  color: #0f269e;
}

.rw-words span:nth-child(7) {
  -webkit-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #0f269e;
}

@-webkit-keyframes rotateWordsFirst {
  0% {
    opacity: 0;
    bottom: 0;
  }
  3% {
    opacity: 1;
    bottom: 0;
  }
  10% {
    opacity: 1;
    bottom: 0;
  }
  15% {
    opacity: 0;
    bottom: 100%;
  }
}

@-ms-keyframes rotateWordsFirst {
  0% {
    opacity: 0;
    bottom: 0;
  }
  3% {
    opacity: 1;
    bottom: 0;
  }
  10% {
    opacity: 1;
    bottom: 0;
  }
  15% {
    opacity: 0;
    bottom: 100%;
  }
}

@keyframes rotateWordsFirst {
  0% {
    opacity: 0;
    bottom: 0;
  }
  3% {
    opacity: 1;
    bottom: 0;
  }
  10% {
    opacity: 1;
    bottom: 0;
  }
  15% {
    opacity: 0;
    bottom: 100%;
  }
}

@media screen and (max-width: 768px) {
  .rw-sentence {
    font-size: 18px;
  }
}

@media screen and (max-width: 320px) {
  .rw-sentence {
    font-size: 9px;
  }
}
<div>The boy
  <div class="rw-words rw-words-1">
    <span>sees</span>
    <span>wants</span>
    <span>finds</span>
    <span>needs</span>
    <span>tries</span>
    <span>loves</span>
    <span>respects</span>
  </div> the girl.</div>

Upvotes: 2

Related Questions