DEMO 1: 自由落体球

@keyframes bounce {
    60%, 80%, to {
        transform: translateY(400px);
        animation-timing-function: ease-out;
    }
    70% { transform: translateY(300px); }
    90% { transform: translateY(360px); }
}

.ball {
    width: 0; height: 0; padding: 1.5em;
    border-radius: 50%;
    margin: auto;
    background: red radial-gradient(at 30% 30%, #fdd, red);
    animation: bounce 10s ease-in forwards;
}

.demo_div_1 {
    background: linear-gradient(skyblue, white 450px, yellowgreen 0);
    min-height: 100vh;

}   

        

DEMO 2: 逐帧loading动画

@keyframes loader {
    to { background-position: -800px 0; }
}

.demo_div_2 {
    width: 100px; height: 100px;
    text-indent: 999px; overflow: hidden; /* Hide text */
    background: url(../images/loader.png) 0 0;
    animation: loader 1s infinite steps(8);
}

        

DEMO 3: 闪烁动画

@keyframes blink-2 {
    to {
        color: transparent
    }
}


.demo_div_3 p{
    animation: .5s blink-2 6;
    animation-direction: alternate;
}

        

DEMO 4: 打字动画

@keyframes typing {
    from { width: 0 }
}

@keyframes caret {
    50% { border-right-color: transparent; }
}

.demo_div_4 h1 {
    font: bold 200% Consolas, Monaco, monospace;
    /*width: 8.25em;*/
    width: 15ch;
    white-space: nowrap;
    overflow: hidden;
    border-right: .05em solid;
    animation: typing 8s steps(15),
                caret 1s steps(1) infinite;
}