CODEWITHSUNDEEP
cssless
Vivendi
Vivendi

Reputation: 21007

Smooth color transition with LESS

I'm using LESS to style a web page (with Bootstrap). What I'd like to do is add a smooth color transition when I hover my mouse over an element. Doesn't this functionality come right out of the box in LESS?

I'm trying to do it like this:

.list-group {
    .list-group-item:hover {
        background: fadein(@cn-sidemenu-hover-bg, 100%);
    }
    .list-group-item {
        background: @cn-sidemenu-bg;
        color: #fff;
    }
}

But this has no color animation. But the name kinda implies to me that this should do some sort of color animation?

Otherwise I don't see any difference between fadein and lighten..

How can I do a smooth color transition with LESS?

Upvotes: 0

Views: 253

Answers (1)

Haroldchen
Haroldchen

Reputation: 199

You will need to add a transition attribute to the .list-group-item class like: 

.list-group-item{
background: @cn-sidemenu-bg;
color: #fff;
transition: background 500ms;
}

Transition tells the browser to interpolate between two defined attributes. fadein and lighten are LESS specific functions, that only process the color value resulting in a fixed color value. i.e. this lighten(#aa0000, 5) would result in the color value #c30000;

fadein does the same thing of color manipulation, but edits the opacity value.

Upvotes: 2

Related Questions