Rolling div - css with javascript


I am trying to understand the rolling effect this web site has.

I am new to web development, I would like to know if it is just css or it has help from javascript/jQuery... If yes, except the <div id="rotator" ... which javascript file should I pay attention to?

I am talking about the rolling effect when the user selects each menu item, START, O NAS, OFERTA etc...

Problem courtesy of: user3033302


It uses CSS animation, changing background image position of the containing div using transition. The image itself has that angled line in it.

.col-4-set > li .note {
-o-transition-property: background-position;
-o-transition-duration: 0.5s;
-ms-transition-property: background-position;
-ms-transition-duration: 0.5s;
-webkit-transition-property: background-position;
-webkit-transition-duration: 0.5s;
-moz-transition-property: background-position;
-moz-transition-duration: 0.5s;
transition-property: background-position;
transition-duration: 0.5s;
background: transparent url('images/box_hover.jpg') no-repeat -600px -600px;
position: absolute;
left: -1px;
top: -1px;
width: 184px;
height: 222px;
padding: 9px 18px;

Some further reading on easing background transitions:

Solution courtesy of: Papa


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.