.cls_div{
  width: 100px;
  height: 100px;
  /* 执行动画 infinite重复*/
  animation: 5s change2 infinite;
}
@keyframes change{
  from{
    background-color: pink;
  }
  to{
    background-color: blue; 
    margin-left: 100px;
  }
}
@keyframes change2{
  0%{
    background-color: pink;
    margin-left: 0px;
  }
  50%{
    background-color: blue; 
    margin-left: 100px;
  }
  100%{
    background-color: pink;
    margin-left: 0px;
    
  }
}
.cls_div2{
  width: 100px;
  height: 30px;
  background-color: pink;
  animation: 3s shake infinite;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/index4.css"/>
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="cls_div">
      
    </div>
    <div class="cls_div2">
      
    </div>
  </body>
</html>

css常用指南，实现动画效果、使用animate.min.css_css