js 购物车放大缩小动画

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物车背景放大缩小动画</title>
<style>
 .global-nav__nav-shop-cart-num{
    position: absolute;
    height: 16px;
    line-height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    background-color: #7ECC00;
    color: #fff;
    font-size: 12px;
    animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
        animation- duration: 2s;/*动画持续时间*/
        animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
        animation-delay: 0s;/*动画延迟时间*/
        animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
        animation-direction: alternate;/*定义动画方式*/
    -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 2s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/}

 
@keyframes ripple {
0% {
 
padding:5px 8px;
}
100% {
 padding:0 5px;
}
}
 
 
 
 
</style>
</head>
 
<body>
    <span class="global-nav__nav-shop-cart-num" id="carId">21</span>
</body>
</html>
如果不是动作触发的话，就要注意，每次触发一次都要删掉该class，可以延迟1-2秒删除