One Element Multiple CSS3 Animation

Apply multiple CSS3 keyframes animation to a single dom element.

by Shishir Morshed

HTML

<div></div>

CSS

div {
    width: 100px;
    height: 100px;
    background: #123456;
    animation-name: one,two,three,four;
    animation-duration: 1s;
    animation-delay: 0s, 1s, 2s, 3s;
    animation-fill-mode: forwards;
}

@keyframes one {
  to { margin-left: 100px; }
}

@keyframes two {
  to { margin-top: 100px; background: #ccc }
}

@keyframes three {
  from {margin-left: 100px; }
  to { margin-left: 0px; background: #07618f }
}

@keyframes four {
  from { margin-top: 100px; }
  to { margin-top: 0; background: #123456 }
}