跳动的球

效果动画.gif

animation

animation-name：动画名
animation-duration：动画执行时间
animation-interaction-count：1/2/.../infinate; 执行动画次数
animation-fill-mode：forwards; 终止状态
animation-direction：alternate; 动画结束后的执行方向
animation-timing-function：linear/ease/ease-in/ease-out/ease-in-out; 动画过渡效果
animation-delay：延时时间

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>demo08_ball</title>
    <style>
    * {
        margin: 0px;
        padding: 0px;
    }

    section {
        width: 50%;
        height: 600px;
        margin: 10px auto;
        border: 1px solid silver;
        border-radius: 2px;
        text-align: center;
        position: relative;
    }

    div#ball {
        width: 200px;
        height: 200px;
        border: 0 none;
        background-image: radial-gradient(180px at center 10px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
        border-radius: 200px;
        position: absolute;
        left: 100px;
        /*动画名称*/
        animation-name: ball;
        /*动画时间*/
        animation-duration: 0.6s;
        /*终止状态*/
        animation-fill-mode: forwards;
        /*执行顺序：结束后反方向*/
        animation-direction: alternate;
        /*执行次数*/
        animation-iteration-count: infinite;
        /*过渡效果*/
        animation-timing-function: ease-in;
    }

    div#shadow {
        width: 160px;
        height: 30px;
        background-color: rgba(125, 125, 125, 0.6);
        border-radius: 160px / 30px;
        position: absolute;
        top: 300px;
        left: 130px;
        animation-name: shadow;
        animation-duration: 0.6s;
        animation-fill-mode: forwards;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;
    }

    @keyframes ball {
        0% {
            top: 20px;
        }
        100% {
            top: 115px;
        }
    }

    @keyframes shadow {
        0% {
            width: 160px;
            height: 30px;
            top: 300px;
            left: 120px;
        }
        100% {
            width: 0px;
            height: 0px;
            top: 315px;
            left: 200px;
        }
    }
    </style>
</head>

<body>
    <section>
        <div id="ball"></div>
        <div id="shadow"></div>
    </section>
</body>

</html>

animation

代码

推荐阅读更多精彩内容