Fill Background Color Left to Right CSS

Fill background color left to right CSS

The thing you will need to do here is use a linear gradient as background and animate the background position. In code:

Use a linear gradient (50% red, 50% blue) and tell the browser that background is 2 times larger than the element's width (width:200%, height:100%), then tell it to position the background right.

background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;

On hover, change the background position to left and with transition:all 2s ease;, the position will change gradually (it's nicer with linear tough)

background-position: left;

http://jsfiddle.net/75Umu/3/

As for the -vendor-prefix'es, see the comments to your question

extra:

If you wish to have a "transition" in the colour, you can make it 300% width and make the transition start at 34% (a bit more than 1/3) and end at 65% (a bit less than 2/3).

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

Demo:

div {
    font: 22px Arial;
    display: inline-block;
    padding: 1em 2em;
    text-align: center;
    color: white;
    background: red; /* default color */

    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
div:hover {
    background-position: left;
}

<div>Hover me</div>

Css animation: fill a div with a color from left to right

Background inside the animation is the culprit. You simply need to animate the position from right to left:

.outer {  margin: 50px;}
.button {  border: 1px solid black;  border-radius: 3px;  width: 100px;  height: 30px;  display: block;  background: linear-gradient(to right, black 50%, transparent 0);  background-size: 200% 100%;  background-position: right;  animation: makeItfadeIn 3s 1s forwards;}
@keyframes makeItfadeIn {  100% {    background-position: left;  }}

<div class="outer">  <div class="button">  </div></div>

Animate background fill from left to right using keyframes animation one by one

you can set animation-delay but for that, you'll need to remove the !important
also if there's an N amount of boxes you can add the style using JS or SCSS loop.

.box {  width: 26px;  height: 10px;  display: inline-block;  background-size: 200% 100%;  background-image: linear-gradient(to left, red 50%, black 50%);  -webkit-animation: progressbar 1s ease infinite;  -moz-animation: progressbar 1s ease infinite;  -o-animation: progressbar 1s ease infinite;  animation: progressbar 1s ease infinite;}
.box:nth-child(2) {  animation-delay: 1s;}
.box:nth-child(3) {  animation-delay: 2s;}
@-webkit-keyframes progressbar {  0% {    opacity: 1;    background-position: 0 0;  }  100% {    opacity: 1;    background-position: -100% 0;  }}

<div class="box"></div><div class="box"></div><div class="box"></div>

Different background-color for left and right half of div

Add a background image with the two colors to the outer div and allow the browser to scale it (instead of tiling it).

Each color should fill exactly 50% of the width of the image to make sure the colors will never leak on either side.

Maybe even position the image absolutely behind the inner div.

For ideas how to stretch the image, see this question: CSS Background Repeat

Text colour fill from left to right using CSS

add an outer div add mix-blend-mode: multiply; when :hover

.popUpWord {  text-transform: uppercase;  font: bold 26vmax/.8 Open Sans, Impact;  background: black;  display: table;  color: white;}
.outPop:hover {  margin: auto;  background: linear-gradient( crimson , crimson) white no-repeat 0 0;  background-size: 0 100%;  animation: stripes 2s linear 1 forwards;}.outPop:hover .popUpWord{  mix-blend-mode: multiply;}
@keyframes stripes {  to {    background-size:100% 100%;  }}
body {  float:left;  height: 100%;  background: black;}

<div class="outPop"><div class="popUpWord">  Text</div></div>

How to make a smooth background fill from left to right along with input and submit when hovering

it took me a while but i hope it will work for you :)

I changed it from linear-gradient to radial-gradient, the reason is because you can't get rounded shape with a linear-gradient.

Then I resized it a little bit so it looks almost the same as you showed us the screenshots, changed the background size to go off the screen , i tried to use % but it didn't work so instead of that i used viewport for both width and height.After that i changed the position so it goes out from the viewport range and on your :hover function just changed back the position so it fills up your div.

If you find the animation too slow, its because i put too big numbers into the viewport sizes, therefore if you want it to be faster, just change the transition value in your .feedback div to a smaller value.

https://codepen.io/qnecro/pen/PomdVLr

.feedback {
  display:flex;
  padding: 40px;
  background: radial-gradient(ellipse, 
#000 40%, #FA5C45 40%);
  background-size: 500vw 300vh;
  background-position: -392vw 50%;
  transition:all 2s ease;
}

.title__block {
  width: 50%;
}

form {
  display: flex;
  flex-direction: column;
}

.input {
  margin-bottom: 20px;
}

.feedback:hover {
  background-position: -288vw 50%;
}

h3 {
  color: #fff;
}

But be AWARE!

I made an Ellipse, so now it looks like this when you look at it from far away and you don't trigger your :hover function:
Sample Image

So when your :hover function triggers, you move the black Ellipse to the right side as the blue arrow shows you in your :hover function, you end up with this:
Sample Image

But if you change your viewport value to too big, it can end up looking like this:
Sample Image

Your div on the left side will be no longer covered by the black ellipse.

HTML background-color : Is it possible to fill the screen from a div?

Just use absolute or fixed positioning and tie element to each side, like so:

.backgroundGrey {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #F2F2F2;
  /* other attributes to position content inside */
}

Fill Background Color Left to Right CSS