Can I apply animations to margins?

Tip for using transitions if it still isn't working...

Make sure you're not setting two separate transitions for different properties like this:

transition: margin 1000ms ease-in-out;
transition: box-shadow 1000ms ease-in-out;

It's obvious what's happening when looking in your browser's debugging tools:

The box-shadow will animate as intended, but margin isn't considered due to normal css rule handling.

The correct way is to combine the rules:

transition: margin 1000ms ease-in-out, box-shadow 1000ms ease-in-out;

You don't need keyframes for this: http://jsfiddle.net/BramVanroy/ybh0thp9/7/

transition: margin 700ms;

You need to add the transition property to the base element that you wish to animate.

You also mentioned that you wanted opacity change, but I don't see how that's possible considering you only have a single element without children. I mean: you can't click on the element if it's hidden.

What you can do, though, is add opacity to the whole thing: http://jsfiddle.net/BramVanroy/ybh0thp9/9/

Or even prettier, with a transformation:

http://jsfiddle.net/BramVanroy/ybh0thp9/10/

.section {
    margin: 0;
    opacity: 0.7;
    transform: scale(0.85);
    transition: all 700ms;
}
.section.open {
    margin: 20px 0;
    opacity: 1;
    transform: scale(1);
}

---

Per comment, you want to fade in the elements on page load. We can do that by adding a class init.

http://jsfiddle.net/BramVanroy/ybh0thp9/12/

$(".section").addClass("init"); // JS
.section.init {opacity: 1;} // CSS

---

With keyframes: http://jsfiddle.net/BramVanroy/ybh0thp9/14/

@-webkit-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@-moz-keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from {opacity: 0; } to { opacity: 1; } }

-webkit-animation: fadeIn 1.5s ease;    
-moz-animation: fadeIn 1.5s ease;
animation: fadeIn 1.5s ease;