Position Animated Text to the Bottom Left of Div-CodePudding

could someone please help me position this animated text to the bottom left corner of my div? If I need to change the way I implement the animated text I am all ears. I got the example I'm using from another Stack Overflow thread. I'm using Wordpress & Elementor.

The link to my website is: http://stalone.flywheelsites.com/

The current code I am using is the following:

.lyrics-container {
    margin: 75% 0% 0% 0%;
}
.lyrics{
  position: absolute;
  font-size: 72px;
  font-weight: bold;
  line-height: 87%;
}
.lyrics:nth-child(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}


.lyrics:nth-child(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,50% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}

  <div >Logo</div>
  <div >
  <p >I'm trying,<br>not to swim<br>into the deep,</p>
  <p >I will never<br>love again.</p>
  </div>

Note: I did a quick margin hack for demonstration purposes, I know this isn't feasible and that is why I am here looking for help.

Thanks in advance!

CodePudding user response：

You need to have a relative wrapper for the absolute positioned element. This is a common way of doing it. You may need to give the wrapper a certain height. For example 100vh or whatever you neeed.

I just added the bare minimum. So you will have to handle the rest of the styles.

.wrapper {
  position: relative;
 }

.lyrics-container {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 75% 0% 0% 0%;
}
.lyrics{
  position: absolute;
  font-size: 72px;
  font-weight: bold;
  line-height: 87%;
}
.lyrics:nth-child(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}


.lyrics:nth-child(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,50% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}

  <div  >
     <div >Logo</div>
     <div >
        <p >I'm trying,<br>not to swim<br>into the deep,</p>
        <p >I will never<br>love again.</p>
     </div>
  </div>

CodePudding user response：

You can use position: absolute; to align it to the bottom without affecting the rest of your components. More on positions here.

.lyrics-container {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.lyrics {
  position: absolute;
  font-size: 72px;
  font-weight: bold;
  line-height: 87%;
}

.lyrics:nth-child(1) {
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;
}

.lyrics:nth-child(2) {
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade {
  0%,
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div >Logo</div>
<div >
  <p >I'm trying,<br>not to swim<br>into the deep,</p>
  <p >I will never<br>love again.</p>
</div>