Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Logic behind opacity etc..

When a website loads, I see many times that each element has a transition on load of the view for the screen.

How do I do this? Or what is the logic behind it?

Ben Schroeder
Ben Schroeder
22,818 Points

Can you provide an example of a website doing this?

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

e.g. look at this site http://schuepbach.ch/

1 Answer

Chris Davis
Chris Davis
16,280 Points

This is achieved with javascript or jQuery :thumbsup:

Here is a simple example using jQuery http://codepen.io/chrisdav6/pen/qRrwbj

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

:O

That's nice as well!

Will need to do ir pure JS.

Though what I managed to find out, is animation stuff with CSS :) 

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.animated {
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
    0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    }

    100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    }
    }

    @-moz-keyframes fadeInDown {
    0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
    }

    100% {
    opacity: 1;
    -moz-transform: translateY(0);
    }
}

But your answer definitely helps, as it expanded my view on this :) got lot's of ideas! :D

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Hey, you are aspiring front-end web dev, me too! We could maybe share the knowledge we got, maybe via Skype or something, if you like?