CoverT 33: Infinite Animation

CSS

Mar 13, 2020

code

There are a ton of things you can do with CSS animations. If you need something to run infinitely, it allows for that easily.

Example

<div class="my-container">
  <div class="my-box"></div>
</div>

* {
  box-sizing: border-box;
}

.my-container {
  position: relative;
  height: 300px;
  border: 10px solid;
}

.my-box {
  position: absolute;
  padding: 10px;
  border: 2px solid;
  width: 50px;
  height: 50px;
  animation: diagonal infinite 3s alternate linear;
}

@keyframes diagonal {
  0% {
    top: 0;
    left: 0;
  }

  100% {
    top: calc(100% - 50px);
    left: calc(100% - 50px);
  }
}

Example

Result