CSS3 Basic Animations

by robdodson

HTML

<div></div>

CSS

div {
    width: 100px;
    height: 100px;
    background: #CCC;
}

@-webkit-keyframes 'expand' {
    from {
        width: 100px;
        height: 100px;
    }

    50% {
        width: 200px;
        height: 200px;    
    }
    
    to {
        width: 300px;
        height: 300px;
    }
}

div {
    -webkit-animation-name: 'expand';
}