css Question posted in
Some basic documentation can be found here.

How can I use CSS to create a background that fades in from left and finishes on the right?

I would like the component content (background and text) to fade in from the left using opacity or other effects. I want it to begin from the left and fade in to full opacity ending on the right. However opacity alone changes the whole component background at the same time. How can i get it to start on the left and finish on the right? I am making a React app and want the effect to happen on rerenders.

I have tied to use translateY(10px) but that moves the whole component and I want the border to stay in place.

.box{
  border: 3px solid #fff0f179;
  border-radius: 3px;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 44px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 44px;
  margin: 3px;
   font: 800 24px ;
  -webkit-text-fill-color: white;
  -webkit-text-stroke: 1px;
  animation: fadeBackground 5s ease;
}
@keyframes fadeBackground {

        /* 0% {opacity:0%}
        40% {opacity:40%}
        60% {opacity:60%;}
        100% {opacity:100%;} */

    0%{
         opacity: 0;
        transform: translateY(10px);
        background-color: white;
    }
    100%{
        opacity: 1;
          transform: translateY(0);
    }
}

How could I achieve this effect?

Tags:

2

Answers


  1. 0

    .html

    <div class="fade-in-div">
    Your content here
</div>

    .css

    body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #1a1a1a;
}

.fade-in-div {
  width: 50vw;
  height: 50vh;
  background: linear-gradient(to right, transparent 0%, #f1a22b 50%, transparent 100%);
  animation: fadeIn 5s forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #fff;
  border-radius: 10px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    background: linear-gradient(to right, transparent 0%, #f1a22b 0%, transparent 100%);
  }
  100% {
    opacity: 1;
    background: linear-gradient(to right, transparent 0%, #f1a22b 50%, transparent 100%);
  }
}

    And if you want the animation to be executed everytime the div enters the viewport then use framerMotion or getBoundingClientRect()

    Login or Signup to reply.
  2. 0

    You can get a fading in effect by covering the element and gradually moving the cover to the right with it having a linear-gradient background with opacity going from 0 to 1.

    As this is just to be a visual effect no extra element is added to the DOM. Instead the after pseudo element is used in this snippet:

    <style>
  div {
    position: relative;
    overflow-y: hidden;
  }
  
  div::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-image: linear-gradient(to right, transparent, white, white 50% 100%);
    transform: translateX(-50%);
    animation: reveal 10s 1 linear forwards;
  }
  
  @keyframes reveal {
    to {
      transform: translateX(100%);
    }
  }
</style>
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum.
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search