HTML/CSS - Using "dynamic margins" (variables(?) - How do I?

Question

I've been looking through the code of some websites, and notice that the margin sizes change depending on certain actions (eg, mouse hover, screen width) to create a cool dynamic effect. This effect can be seen here when changing screen width: http://www.smashbros.com/us/

And here on mouse hover: http://www.disneyanimation.com/projects

I really have no clue how this is done! How can the code values automatically change based on certain actions.

Thanks in advance

edit:

I tried something.... but it isn't really giving me the results I want

.cats {
background-color: #eee;
height: 90px;
width: 100%;
}

.cats {
-webkit-animation-duration: 0.5s;
-webkit-animation-name: slide-up;
-moz-animation-duration: 0.5s;
-moz-animation-name: slide-up;
}

.cats {
-webkit-animation: slide-up 0.5s linear;
-moz-animation: slide-up 0.5s linear;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}

.cats :hover {
  /* Toggle the animation play state to running when we are hovering over our sticker */
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
}

@-webkit-keyframes slide-up {
from {
    margin-top: 0px
}
to {
    margin-top: -15px
  }
}

Answer 1

To move gradually, you can apply transition to your div. For example transition: 0.6s;

For more info on transitions property please visit this link.

Answer 2

You can achieve this using CSS the hover selector as per @David's answer here:

https://stackoverflow.com/a/905042/3264286

Further details here:

http://www.w3schools.com/cssref/sel_hover.asp

Alternatively, if you are happy to use JavaScript, you can have a lot more power.

http://www.w3schools.com/jsref/event_onmouseover.asp

More discussion:

css hover vs. javascript mouseover