CSS3 animate margins

Question

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.

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

To create animations witch CSS3 you need to:

1 - Create a class with animation atribute, to work in some browsers you need to put prefixes: -webkit-, -o-, -moz-. 2 - Create animation keyframes

see the example:

.animate{
    animation: myAnimation 10s; 
    animation-direction: alternate;
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-delay: 0;
    animation-timing-function: 1;
    animation-direction: alternate;

    -webkit-animation: myAnimation 10s;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    -webkit-animation-timing-function: 1;
    -webkit-animation-direction: alternate;

    -moz-animation: myAnimation 10s;
    -moz-animation-direction: alternate;
    -moz-animation-play-state: running;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 0;
    -moz-animation-timing-function: 1;
    -moz-animation-direction: alternate;

    -o-animation: myAnimation 10s;
    -o-animation-direction: alternate;
    -o-animation-play-state: running;
    -o-animation-iteration-count: infinite;
    -o-animation-delay: 0;
    -o-animation-timing-function: 1;
    -o-animation-direction: alternate;
}

    @keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 50px}
        25%     { margin-top: 100px; margin-left: 50px }
        50%     { margin-top: 0; margin-left: 50px }
        75%     { margin-top: 100px; margin-left: 50px }
        100%    { margin-top: 0; margin-left: 50px }
    }
    @-webkit-keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 100px}
        25%     { margin-top: 100px; margin-left: 100px }
        50%     { margin-top: 0; margin-left: 100px }
        75%     { margin-top: 100px; margin-left: 100px }
        100%    { margin-top: 0; margin-left: 100px }
    }
    @-moz-keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 100px}
        25%     { margin-top: 100px; margin-left: 100px }
        50%     { margin-top: 0; margin-left: 100px }
        75%     { margin-top: 100px; margin-left: 100px }
        100%    { margin-top: 0; margin-left: 100px }
    }
    @-o-keyframes myAnimation {
        0%      { margin-top: 0; margin-left: 100px}
        25%     { margin-top: 100px; margin-left: 100px }
        50%     { margin-top: 0; margin-left: 100px }
        75%     { margin-top: 100px; margin-left: 100px }
        100%    { margin-top: 0; margin-left: 100px }
    }