How to prevent inner text resizing in CSS Animation @keyframes?

Question

I want to have transformed background using @keyframes. But the text is also scaled and I want to make it without any changes.

I've tried this method but it seems the @keyframes is the problem. Maybe it's impossible only with html/css and I should use JS/jquery ? Or I make some other mistake which I'm not aware of.

#bg {
  z-index:1;
  background:grey;
  position:relative;
  width:1000px;
  height:400px;
  animation:bg 2s ease infinite;

}
@keyframes bg {
  from {
    transform:none;
  }
  to {    
    transform:scale(1.107,1.007);
  }
}

ul {
  color:white;
  list-style-type:none;
  position:absolute;
}

<div id="bg">
  <div class="menu">
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
</div>

When you say `transformed background` do you mean that actually you want that the background will exceed from the screen or you want that it will stay in the same position but will do something like zoom (if your background is an image)? — Mosh Feu, May 17 '16 at 13:10
it should do something - transform:scale (it will be an image and I want to add a navbar on it, which I don't want to do any transformations on). — Michał Wawrzyniec Jaszczuk, May 17 '16 at 13:19
SO, if the image is `img` then set it `position:absolute` and the do the `transform` on it. If the image will be `background-image` you can transform it using `background-size`. Can you create a [snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) or [bin](http://jsbin.com/) for this? In this way I could show you how to do this. — Mosh Feu, May 17 '16 at 13:32
Here is the codepen - http://codepen.io/michaljaszczuk/pen/pymKNB The problem is - the animation should be constant, not hover effect etc. It should look kind of breathing. Using "@keyframes", I cannot style ul li elements (styling doesn't appear. So, imho the problem is in keyframes, but I don't know how to solve it. Thank you all for your help :) — Michał Wawrzyniec Jaszczuk, May 17 '16 at 21:31

score 0 · Accepted Answer · answered May 18 '16 at 07:10

Do you mean something like that? If so, you are quite there, you just need to set the image position:absolute so the image will be as background, and also: z-index:-1 so the image will not cover and hide the content. Also, in this case you don't need background-size it only for background-image property.

.image {
  z-index:-1;
  position:absolute;
  width:100%;
  height:100%;

  animation:img 2s ease-in-out infinite;
  animation-direction:alternate;
}

@keyframes img {
  from { transform:none}
  to { transform:scale(1.007,1.007);}
}

ul {
  color:white;
  list-style-type:none;
  position:absolute;
}

<div class="container-fluid">
  <div class="menu">
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
  <img class="image" src="https://3.bp.blogspot.com/-uz1WlYUbNxc/Vxok-DC_a7I/AAAAAAAADf8/nsZC7tFimW0P7OrwBdfTiA-_eWQ_VnohACLcB/s1600/13054839_1119372871446695_1522714893_o.jpg">
</div>

Yes ! That's it ! Thank you very much @Mosh Feu, you're tha man !:) — Michał Wawrzyniec Jaszczuk, May 18 '16 at 21:17

How to prevent inner text resizing in CSS Animation @keyframes?

1 Answers1