CSS3 animate margins

Trying to animate in CSS3 margins. Which this site seems to say you can, but it’s not working for me.

Here is a jsFiddle: http://jsfiddle.net/ybh0thp9/3/ (Click on a section to see animation toggle).

Here is my CSS:

.section{
    display: block;
    animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;
}
.section.open {
          margin: 20px 0;
}

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.


Source: css3

Leave a Reply