心跳动画写法是不是能更简练？

首页课程实战体系课手记专栏慕课教程

心跳动画写法是不是能更简练？

来源：2-21 自由编程

行健同学

2020-11-13 09:41:30

# 具体遇到的问题
主要是代码书写，怎么实现心得前两跳大，后两跳更密集。我这个思路是不是最简单的思路。求指教！
# 报错信息的截图

@keyframes tiao {

/* 第一次心跳 */

0% {

transform: scale(1);

opacity: 1;

}

33.3% {

transform: scale(2);

opacity: 0;

}

/* 第二次心跳 */

33.4% {

transform: scale(1);

opacity: 1;

}

66.6% {

transform: scale(2);

opacity: 0;

}

/* 第三次连跳 */

66.7% {

transform: scale(1);

opacity: 1;

}

83.3% {

transform: scale(1.4);

opacity: 0.2;

}

83.4% {

transform: scale(1);

opacity: 1;

}

100% {

transform: scale(1.4);

opacity: 0.2;

}

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心动的感觉</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    div {
        width: 88px;
        height: 81px;
        background: url(images/xin.png) no-repeat top left;
    }

    .heartstatic {
        margin: 100px auto;
    }

    .heartstatic .heartbeat {
        opacity: 1;
        animation: tiao 2s linear 0s infinite;
    }

    @keyframes tiao {
        /* 第一次心跳 */
        0% {
            transform: scale(1);
            opacity: 1;
        }

        33.3% {
            transform: scale(2);
            opacity: 0;
        }
        /* 第二次心跳 */
        33.4% {
            transform: scale(1);
            opacity: 1;
        }
        66.6% {
            transform: scale(2);
            opacity: 0;
        }
        /* 第三次连跳 */
        66.7% {
            transform: scale(1);
            opacity: 1;
        }
        83.3% {
            transform: scale(1.4);
            opacity: 0.2;
        }
        83.4% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(1.4);
            opacity: 0.2;
        }
    }
</style>

<body>
    <div class="heartstatic">
        <div class="heartbeat"></div>
    </div>
</body>

</html>
在这里输入代码，可通过选择【代码语言】突出显示