Функция translate

by webref

HTML

<p>Привет</p>

CSS

p {
    animation: translating 4s linear 0s infinite;
    background: turquoise;
    color: white;
    height: 60px;
    line-height: 60px;
    margin: 0;
    position: absolute;
    text-align: center;
    width: 60px;
}
@keyframes translating {
  0%  { transform: translate(0, 0);}
  25% { transform: translate(240px, 0);}
  50% { transform: translate(240px, 140px);}
  75% { transform: translate(0, 140px);}
  100%{ transform: translate(0, 0);}
}