Transition Background-Color Via Slide Animation

Transition background-color via slide animation

In order to slide the background color up you would need to use a background image, or a gradient of some sort, while gradually adjusting the background-position:

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, black 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

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

Animate background color to slide down when adding/removing class, only with CSS?

You can use linear-gradient for the color and you will able to create your effect by adjusting background-size.

Here is an idea:

let previousClass="";function color(className) {  $('#token').removeClass(previousClass);  previousClass=className;  setTimeout(function() {      $('#token').addClass(previousClass);  }, 500);
}

.token {  width: 100px;  height: 100px;  border: 1px solid #000;  border-radius: 50%;  margin-bottom: 20px;  background-size: 100% 0;  background-position: 0 0;  background-repeat: no-repeat;  background-image: linear-gradient(white, white);  transition: 0.5s background-size linear;}
.red {  background-image: linear-gradient(red, red);  background-size: 100% 100%;}
.blue {  background-image: linear-gradient(blue, blue);  background-size: 100% 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="token" id="token"></div><button onclick="color('red')">Red</button><button onclick="color('blue')">Blue</button>

Tabs background-color slide transition to next tab

Here is an idea with pseudo element and CSS variable:

$('label').click(function() {   $('.radio_wrap').attr('style','--i:'+$(this).data('i'));})

*,*:before,*:after {  box-sizing: border-box;}
input {  position: absolute;  opacity: 0;}.radio_wrap { position:relative; overflow:hidden; z-index:0; --i:-1;}.radio_wrap:before {  content:"";  position:absolute;  z-index:-1;  width: calc(100% / 4);  top:1px;  left:calc( var(--i) * (100% / 4));  height:100%;  background:grey;  transition:.3s ease-in-out;}
label {  min-width: calc(100% / 4);  position: relative;  z-index:2;  float: left;  text-align: center;  text-shadow: none;  padding: 20px;  border: 1px solid #dfe0e4;  color: grey;  font-size: 14px;  position: relative;  transition: color .3s ease-in-out;}
input:checked+label {  color: white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="radio_wrap">  <input type="radio" id="radio1" name="radio1">  <label for="radio1" data-i="0">tab1</label>  <input type="radio" id="radio2" name="radio1">  <label for="radio2" data-i="1">tab2</label>  <input type="radio" id="radio3" name="radio1">  <label for="radio3" data-i="2">tab3</label>  <input type="radio" id="radio4" name="radio1">  <label for="radio4" data-i="3">tab4</label></div>

How do I gradually change the background color of a element from left to right

Here's a pattern using linear gradent, background position, and css transition.

Right to left:

button {  background-image: linear-gradient(to right, red 40%,  blue 60%);     background-size: 300% 100%;  transition: background-position .5s;  background-position: 0;    border: none;  padding: 1em;}

button:hover {   background-position: 100%;}

<button>A button</button>

Transition Background-Color Via Slide Animation

Transition background-color via slide animation

Animate background color to slide down when adding/removing class, only with CSS?

Tabs background-color slide transition to next tab

How do I gradually change the background color of a element from left to right

Related Topics

Leave a reply