1 Replies - 172 Views - Last Post: 25 August 2019 - 03:39 PM

#1 ossscar   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 23-August 19

Vertical align HTML/CSS text animation

Posted 23 August 2019 - 04:49 AM

Hi all!

For a new website I'm building I want to make a simple HTML/CSS based text animation. I got it all working, but I can't figure out how to vertical align the text animation.

The animation in short: I want to have three different texts faded in and out, centered in a diamond shaped image. It all works fine, but when I resise my window or open the page with my other computer the text won't be at the right height. I figured out how it's always horizontally centered, but can't get it vertically aligned. Is this something simple I'm missing? Hope you can help me! Please see attached screenshots (full size window & smaller window) and the code so far below.

Thanks!

HTML
<p class="item-1">Dream <br><br>Code</p>

<p class="item-2">Orchestra of the <br><br>Eighteenth Century</p>

<p class="item-3">Orchestre de<br><br> 
Dixhuitième Siecle</p>



CSS
.item-1, 
.item-2, 
.item-3
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;


color: #e7e7e7;
font-family: 'Libre Baskerville';
padding:0px;
margin: auto;
margin-top: -400px;
width: 100%;
height: 100%;
font-size: 2.5em;
line-height: 0.6em;
animation-duration: 15s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}


.item-1{
	animation-name: anim-1;
}

.item-2{
	animation-name: anim-2;
}

.item-3{
	animation-name: anim-3;
}

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

@keyframes anim-2 {
	0%, 33.33% {  opacity: 0; }
  41.63%, 58.29% { opacity: 1; }
  66.66%, 100% {  opacity: 0; }
}

@keyframes anim-3 {
	0%, 66.66% {  opacity: 0; }
  74.96%, 91.62% {  opacity: 1; }
  100% {  opacity: 0; }
}

Attached image(s)

  • Attached Image
  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Vertical align HTML/CSS text animation

#2 Fo4ty5`   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 20
  • Joined: 05-June 13

Re: Vertical align HTML/CSS text animation

Posted 25 August 2019 - 03:39 PM

do you have to full html code, so i can put it together and maybe help you test somethings? Also try to wrap the text in a div, align the div? may be easier.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1