0

I'd like to make a div's (just containing text) background slide in from left to right, how can i accomplish this? I can make it fade in using css transition but cannot figure out how to make it slide in.

.container{
  display:inline;
  padding:10px;
  transition: background-color 2s;
}

.container:hover{
  background-color:lightcoral;
}
<div class='container'>
    some text here
</div>
0stone0
  • 34,288
  • 4
  • 39
  • 64
AWE
  • 64
  • 4
  • 14

1 Answers1

-1
<style>
  div {
    height: 40px;
    width: 70%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
    position: relative;
  }

  #rect {
    animation-name: slide;
    animation-duration: 4s;
  }

  @keyframes slide {
    0% {
      left: 0px;
    }
    50% {
      left: 50px;
    }
    100% {
      left: 50px;

    }
  }
</style>

<div id="rect"></div>

You can try using a keyframes animation like this one. Adapted from: https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-movement-using-css-animation

rhsmith
  • 1
  • 1
  • using id prevent you from using that animation more than once, not a big deal but not the best way to go. Also, it's not the background that is sliding but the whole element. And finally, remove the 50% if it's the same as 100%; that way it will be easier to configure your animation time (here your animation time is 4s/2) – Apolo Oct 18 '19 at 12:38