How to make a transition of opacity from 0 to 1 with Compass?

Question

I'm trying to build up a fade style using CSS3 (and SASS/Compass to be readable)

I would like to make the elements turn from full transparency to full opacity. I tried something like that:

@import "compass/css3/transition";
@import "compass/css3/opacity";

.fade{
    @include transparent;
    @include transition(opacity(1), 2s ease-out);
}

With that try, there's no transition effect, and the element remains transparent...

score 2 · Accepted Answer · answered May 16 '14 at 22:48

2

As the Compass documentation shows, you do have to specify the intended pseudo-element. Otherwise, how will the browser know if the transition is supposed to occur on :hover or some other action.

Also, don't include the (1) argument in the opacity call:

.fade{
  @include transparent;
  @include transition(opacity, 2s ease-out);
}

.fade:hover {
  opacity: 1;
}

Example.

answered May 16 '14 at 22:48

KatieK

13,586
17
76
90

Thanks for your answer, which matches my question the way I formulated it. However, your answer just made me realize I should use Animation instead. I'd like to reproduce a Fade In onload effect. – Yako May 17 '14 at 05:32

score -1 · Answer 2 · answered May 17 '14 at 07:59

-1

I finally used a SCSS version of this SASS mixin: http://thecssguru.freeiz.com/animate/

answered May 17 '14 at 07:59

Yako

3,405
9
41
71

How to make a transition of opacity from 0 to 1 with Compass?

2 Answers2