Can I apply animations to margins?

Question

I'm trying to animate in CSS3 margins, which this site seems to say you can, but I can't get working.

I actually have 3 animations. 1 for a simple initial fadeIn on initial load, then the 2 others for the margin animation on click. I've also just tried margin instead of the top and bottom but still no sign of it working.

Click on a section to see animation toggle.

$(".section").click(function() {      $(this).toggleClass("open");  });

body{      background: #f1f1f1;  }    .section{      display: block;      background: #fff;      border-bottom: 1px solid #f1f1f1;      animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;  }  .section.open {      margin: 20px 0;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  <div class="wrapper">      <div class="section">Some content</div>      <div class="section">Some content</div>      <div class="section">Some content</div>      <div class="section">Some content</div>      <div class="section">Some content</div>      <div class="section">Some content</div>      <div class="section">Some content</div>  </div>

Here is a JSFiddle: http://jsfiddle.net/ybh0thp9/3/

Answer 1

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; 

Answer 2

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;