2 Replies - 300 Views - Last Post: 11 June 2020 - 02:48 PM

#1 chrisjchrisj   User is offline

  • D.I.C Head

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

Help with CSS animation

Posted 05 June 2020 - 02:20 PM

This animation successfully slides text out from the left, across the web page, after a delay.

But, first, the text appears as soon as the page is accessed, then dispappears right before the successfully slide out.
I only want the text to appear when it slides out from the left. Here’s the code:

.item-1 {
	position: absolute;
	  display: block;
	  width: 60%;
		animation-duration: 20s;
		animation-timing-function:ease;
		animation-iteration-count: infinite;
		animation-delay: 10.5s;
	}

.item-1{
	animation-name: anim-1;
	font-size:1.0vw;
	color:#FFF;
}

@keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
 8.3%,25% { left: 25%; opacity: 1; }
 33.33%, 100% { left: 110%; opacity: 0; }
}


Any help with having the text not first appear before the slide out animation, is appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: Help with CSS animation

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15783
  • View blog
  • Posts: 63,262
  • Joined: 12-June 08

Re: Help with CSS animation

Posted 05 June 2020 - 03:53 PM

What's the HTML that goes with it?

I dropped that into a html form and nothing is happening so I am unable to reproduce what you are saying.
Was This Post Helpful? 0
  • +
  • -

#3 chrisjchrisj   User is offline

  • D.I.C Head

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

Re: Help with CSS animation

Posted 11 June 2020 - 02:48 PM

Thank you for your reply.
I've made some changes.
I'm essentially starting this post over.
I've been trying to have a line with 'THIS' 'Square1' 'THAT' all horizontally next to each other on a single line.

Here is the current code:

.animation-box {
  min-height: 4.5rem;
  margin: 175px auto 0;
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 100%;
  overflow: hidden;
}
.animation-box span {
  margin: 0 0.15em;
  display: inline-block;
  opacity: 0;
}
.text {
  font-size: 30px;
  color: #000;
}
.square1 {
  width: 1.75vw;
  height: 1.75vw;
background-color: #ccc;
}
 .text2 {
  font-size: 30px;
  color: #fff;
}
</style>
</head><body>

<section class="animation-box">
  <span class="text">THIS</span><span class="square1"></span><span class="text2">THAT</span><br>
</section>



The code works well, which means it displays THIS on the left and THAT on the right, however, ‘square1’ isn’t a square. Instead of being a square, the entire horizontal span shows #ccc, as the background color (as if the square is the full width of the anmination span). Any ideas on changing that where square1 is a #ccc square the size of W1.75vx by H1.75vw?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1