css3动画案例——爱心跳动特效

 div{
            transform: rotate(45deg);
            position: relative;
            width: 200px;
            height: 200px;
            background: red;
            margin: 15% auto;
            animation: jump 1.5s linear infinite;
        }
        div::after{
            content: '';
            display: block;
            width: 200px;
            height: 200px;
            background: red;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: -100px;
        }
        div::before{
            content: '';
            display: block;
            width: 200px;
            height: 200px;
            background: red;
            border-radius: 50%;
            position: absolute;
            top: -100px;
            right: -0px;
        }
        @keyframes jump{
            0%{
                transform: rotate(45deg) scale(1);
            }
            30%{
                transform:rotate(45deg) scale(1.5);
            }
            60%{
                transform:rotate(45deg) scale(1);
            }
            100%{
                transform:rotate(45deg) cale(0.8);
            }
        }

先写一个div，之后再写样式
animation: jump 1.5s linear infinite;（设置动画的名字、执行时间、时间变化速度和循环次数）
@keyframes jump里面写在不同时间段变化的样式