I already search for that, but didn't find much information about it. It's possible to create and CSS transition with :hover effect, for example:

div { color: red;} div:hover {color: blue;}

And you just have to add the transition to this CSS. But I want that the trigger to start animation is when the DIV show up in the screen.

How can I achieve that?

I already search for that, but didn't find much information about it. It's possible to create and CSS transition with :hover effect, for example:

div { color: red;} div:hover {color: blue;}

And you just have to add the transition to this CSS. But I want that the trigger to start animation is when the DIV show up in the screen.

How can I achieve that?

• javascript
• jquery
• html
• css

• See here: stackoverflow./questions/8774089/… – Anderson Green Commented Nov 24, 2013 at 22:43

2 Answers 2

One way to do this is using a function to check if the element in question is in view when you scroll the page.

    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

    $(window).scroll(function(){

        if (isScrolledIntoView('.class') === true) {
            $('.class').addClass('in-view')
        }

    });

code from: Check if element is visible after scrolling

This code will add a class "in-view" if ".class" is visible after scrolling down. Based on this class you can add you css transition, for example:

   .class {
      opacity:0;
      transition:all 0.5s;
   }

    .class.in-view {
       opacity:1;
    }

Example: http://jsfiddle/z3xTU/ (scroll down)

You can't make that happen purely based upon CSS. Look in to adding the animation via JQuery on document load (or whatever event you want).

for example:

$(document).ready(function() {
  $('.divSelectorGoesHere').animate({
      // Your css "property":"value"
  });
}