0 Replies - 657 Views - Last Post: 25 June 2020 - 08:58 PM

#1 chrisjchrisj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 141
  • Joined: 04-February 19

Help with Fade Out or Dissolve, in CSS animation

Posted 25 June 2020 - 08:58 PM

This code I'm using displays successfully sliding out text horizontally across the page. However, I'd like it to only display temporarily, I've searched css amination and tried several things without success. Sliding text back out would be one solution, but I'm not adding the code correctly apparently. I'd actually like something more interesting than simply sliding back, like fading out or dissolving the text, etc. I'm open to suggestion. Here's the current working code:
.animation-box4 {
  min-height: 4.5rem;
  margin: 15% auto 0;
  display: flex;
  align-items: center;
  width: 80%;
  overflow: hidden;
}

.message {
  font-size: 30px;
  display: inline-block;
  font-weight: 900;
  font-family: sans-serif;
}

.sliding-text-1,
.sliding-text-2,
.sliding-text-3 {
animation-name: slide;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

.sliding-text-1 {
  animation-delay: 5s;
  color: #ff00ff;
}

.sliding-text-2 {
animation-delay: 6.5s;
color: #ccc;
}

.sliding-text-3 {
  animation-delay:8s;
  color: #fff;
}

u/keyframes slide {
  from {
    transform: translateX(200px);
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
  }





Any guidance or examples are welcomed.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1