How to Animate the Opacity of the Background of a Div

How can I animate the opacity of the background of a div?

First of all you need to set the property correctly

$('#test').animate({ 'background-color': 'rgba(0, 0, 0, 0.7)' },1000);

then you need to include jquery-ui to animate colours.

http://jsfiddle.net/7twXW/11/

You can also use css transitions to animate background colours

#test {
background-color: rgba(0, 0, 0, 0);
-webkit-transition:background-color 1s;
-moz-transition:background-color 1s;
transition:background-color 1s;
}

http://jsfiddle.net/7twXW/13/

Opacity Animation for background-image

Answer to your first question:

Put the background-image on a pseudo element ::before instead:

#InnerImage::before {
background: url('imgurl.com') no-repeat center left;
content: "";
position: absolute;
/* the following makes the pseudo element stretch to all sides of host element */
top: 0; right: 0; bottom: 0; left: 0;
z-index: 1;
}

This requires to set position: relative; on #InnerImage:

#InnerImage {
position: relative;
}

and you need to make sure all other child elements are above the pseudo element using z-index (which only applies the way you need if you position those elements):

#InnerImage * {
position: relative;
z-index: 2;
}

Notice: #OuterImage #InnerImage can be safely shortened to #InnerImage since there may be only one element on a page with any given id value anyway. Also I'd advise not to use id selectors in CSS unless you know for sure why you are doing it.

Regarding your animation, it seems like you want it to start only after two seconds have gone by. This can be achieve using a transition like this:

transition: opacity 1s ease 2s;

where 1s is transition-duration and 2s is transition-delay.

https://developer.mozilla.org/en/docs/Web/CSS/transition

Example:

#InnerImage::before {  background: url(http://lorempixel.com/300/200) no-repeat center left;  content: "";  position: absolute;  /* the following makes the pseudo element stretch to all sides of host element */  top: 0;  right: 0;  bottom: 0;  left: 0;  transition: opacity 1s ease 2s;  z-index: 1;}#InnerImage {  position: relative;  width: 300px;  height: 200px;}#InnerImage * {  position: relative;  z-index: 2;}
#InnerImage:hover::before { opacity: 0.25;}
<div id="InnerImage">  <h2>Hey!</h2>  <button>noop</button></div>

Is it possible to animate a DIV's background color opacity?

You can use multiple background. One for light orange and the other one for the dark orange by using a linear gradient. Then you change the size of the gradient so it goes above the light color when adding the active class. Like that you will create the left to right opacity animation (you can also make it for right to left or even consider top/bottom).

Here is an example (hover on the element to see the color change.

.progress-bar-item {  background:  linear-gradient(to right,orange,orange) 0 0/0 100% no-repeat,  rgba(255, 165, 0,0.1);  height: 40px;  width: 300px;  float: left;  margin-right: 10px;  transition:.5s;}
.progress-bar-item:hover { background-size:100% 100%,auto;}
<div class="progress-bar-item"></div>

Changing div opacity one by one to make animation

This is after fixing your code:

@-webkit-keyframes dance {
from {
opacity: 1
}
to {
opacity: 0.1
}
}

li.block-1 {
animation: dance 1s infinite;
animation-delay: 222ms;
animation-direction: alternate;
}

Here is the JSFiddle demo

You can fine tune the value to your preference :)

How to animate background opacity without affecting content opacity (when hover)?

If the button just has a single background-color, you can use rgba to change the color opacity without affecting other properties. Sample:

button {
background-color: #f000;
color: #333;
transition: all .3s ease-in-out;
}

button:hover {
background-color: rgba(255, 0, 0, 0);
}

Pay attention to transition timing and easing function for adjusting it to your own needs. Also, remember to add a -webkit-transition prefixed version if you care about Androids before 4.4 (as shown by http://caniuse.com/#search=transition).



Related Topics



Leave a reply



Submit