CODEWITHSUNDEEP
htmlcssdom
Aral Roca
Aral Roca

Reputation: 5919

CSS3: Transition of background color to transparent

I want to do a transition in a div that:

And... Between the two fases shows background-color:rgba(242, 245, 169, 0.9); , background-color:rgba(242, 245, 169, 0,8);, background-color:rgba(242, 245, 169, 0.7);...

Similar to this solution, but without the ':hover'. Directly.

How can I get it?

Thank you.

Upvotes: 8

Views: 12863

Answers (3)

August Boehm
August Boehm

Reputation: 54

In addition to the other correct answers, if the hover element is not a div but a link, and you are transitioning to/from an rgba color, Chrome 62 will not transition it unless you specify the link is not inline, ie:

CSS

a {display:inline-block;}

If the hover element is left displayed inline, for some reason Chrome won't animate the transition.

Upvotes: 0

Michael Money
Michael Money

Reputation: 2449

Just use animation for that. My solution is reusable, because I use opacity property, so you can use any color you want.

Working JSFIDDLE: http://jsfiddle.net/5m1pb227/1/

HTML

<div class="box">

CSS

.box {
  background-color:rgb(242, 245, 169);
  width:100px; height:100px;
  position: relative;
  animation: myfadeIn 2s;  
}


@keyframes myfadeIn {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

Upvotes: 2

Bram Vanroy
Bram Vanroy

Reputation: 28485

http://jsfiddle.net/BramVanroy/hakomq5L/

div {
    width: 100px;
    height: 100px;
    animation: fade 3s forwards;
    background-color:rgba(242, 245, 169, 1);
}

@keyframes fade {
    from {background-color:rgba(242, 245, 169, 1);}
    to {background-color:rgba(242, 245, 169, 0);}
}

Upvotes: 20

Related Questions