Vue

by Wave7KN

HTML

<div id="app">
  <div class="box">
    <div class="box_peach"></div>    
    <div class="box_greenapple"></div>
    <div class="box_orange"></div>
    <div class="box_berry"></div>
  </div> 
</div>

SCSS

.box{
  display: grid;
  grid-template-areas: "peach greenapple"
                       "orange berry";
  grid-template-columns: 90% 10%;
  grid-template-rows: 90% 10%;
  height: 100vh;
  width: 100vw;
  animation: move 3s ease infinite;
  $colors: (
    peach: #f562a6,
    greenapple: #56d2aa,
    orange: #ffbc00,
    berry: #746ace
  );
  @each $key, $color in $colors{
    &_#{$key}{
      background-color: #{$color};
      grid-area: #{$key};
    }
  }
}

@keyframes move {
  20% {
    grid-template-columns: 90% 10%;
    grid-template-rows: 90% 10%;
  }
  40% {
    grid-template-columns: 10% 90%;
    grid-template-rows: 90% 10%;
  }
  60% {
    grid-template-columns: 10% 90%;
    grid-template-rows: 10% 90%;
  }
  80% {
    grid-template-columns: 90% 10%;
    grid-template-rows: 10% 90%;
  }
  100%{
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
  }
}

Vue

new Vue({
  el: "#app",
  data: {
  },
  methods: {
  }
})