I would lkie to animate a parent without the child's animation.

My HTML & CSS structure looks like this:

.parent{
   background-image: url('https://pm1.narvii.com/6195/421ddbf8c9a2fb1715ef833f869164dc1beb8600_hq.jpg');
    background-repeat: no-repeat;
    background-position: center;
    padding: 35px;
    margin: 15px 0;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.parent:hover{
    animation-name: bounce;
 }
 
 @keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
        -webkit-transform: translateY(0);
        -ms-transform:     translateY(0);
        transform:         translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        -ms-transform:     translateY(-30px);
        transform:         translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform:     translateY(-15px);
        transform:         translateY(-15px)
    }
}

p{
  font-size: 50px;
  color: blue;
  text-align: center;
}

<div >
  <p>TEST</p>
</div>

Finally, I'd like the text inside to be 'static'. My point is, the text inside the parent shouldn't move during the animation. I just want the image to move, not the text

CodePudding user response：

You could put parent inside a container and do this.

#container{
     position:relative;
     
 }
 #pid{
     position:absolute;
     top:15px;
     left:50%;
 }

CodePudding user response：

You can animate background-position which will only affect the bg image and not the text. I have also used calc() function, to keep the image centered while moving it up and down.

.parent {
  background-image: url('https://pm1.narvii.com/6195/421ddbf8c9a2fb1715ef833f869164dc1beb8600_hq.jpg');
  background-repeat: no-repeat;
  background-position: center;
  padding: 35px;
  margin: 15px 0;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.parent:hover {
  animation-name: bounce;
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    background-position: left 50% top 50%;
  }
  40% {
    background-position: left 50% top calc(50%   -30px);
  }
  60% {
    background-position: left 50% top calc(50%   -15px);
  }
}

p {
  font-size: 50px;
  color: blue;
  text-align: center;
}

<div >
  <p>TEST</p>
</div>