css动画,如何隔两秒执行一次??求指教

.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);
  }
}
阅读 4.3k
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);
    }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题