<div>
  <div class="square1"></div>
  <div class="square2"></div>
</div>

.square1 {
  width: 50px;
  height: 50px;
  background-color: red;
  display: inline-block;
  outline: 1px solid black;
  
  animation: increaseOutlineSize 2s both infinite;
}

@keyframes increaseOutlineSize {
  0% {
    outline: 1px solid black;
  }
  100% {
    outline: 10px solid black;
  }
}

.square2 {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: orange;
  margin-left: 100px;
  animation: increaseBoxShadowSize 2s both infinite;
}

@keyframes increaseBoxShadowSize {
  0% {
    box-shadow: 0 0 0 1px black;
  }
  100% {
    box-shadow: 0 0 0 10px black;
  }
}