css动画，如何隔两秒执行一次？？求指教

Question

.item{ animation: gelatine 0.5s infinite}@-webkit-keyframes gelatine {  from, to {    -webkit-transform: scale(1, 1);    transform: scale(1, 1);   }   25% {    -webkit-transform: scale(0.9, 1.1);    transform: scale(0.9, 1.1);   }   50% {    -webkit-transform: scale(1.1, 0.9);    transform: scale(1.1, 0.9);   }   75% {    -webkit-transform: scale(0.95, 1.05);    transform: scale(0.95, 1.05);   } }

Answer 1

把动画时间设置为2.5s,然后前80%不动，后20%做动画就行了

.item{ animation: gelatine 2.5s infinite}

@keyframes gelatine {
    80%{        -webkit-transform: scale(1, 1);        transform: scale(1, 1);}
    85%{        -webkit-transform: scale(0.9, 1.1);        transform: scale(0.9, 1.1);
    }
    90%{        -webkit-transform: scale(1, 1);        transform: scale(1, 1);
    }
    95%{        -webkit-transform: scale(1.1, 0.9);        transform: scale(1.1, 0.9);
    }
}