css3-animations wtf

by leaverou

HTML

<div></div>

CSS

@-moz-keyframes foo {
    from { border:0 solid black; }
    to { border:20px solid black; }
}

@-ms-keyframes foo {
    from { border:0 solid black; }
    to { border:20px solid black; }
}

@-webkit-keyframes foo {
    from { border:0 solid black; }
    to { border:20px solid black; }
}

div {
    width:50px;
    height:50px;
    border-style:solid; /* If you remove this, it won't work! */
    -moz-animation:1s foo infinite alternate;
    -ms-animation:1s foo infinite alternate;
    -webkit-animation:1s foo infinite alternate;
}