Using css animation to make a div element move to each corner of the page

Question

I would like to know how to use css animation to make a circle div element go to each corner of the page. I have attempted to do this to no avail.

Quite a basic question, but It will help me to understand.







CSS 201

user_4095056 · Answer

CSS Changes

.box {
        width: 300px;
        height: 300px;
        border: 10px solid black;
        background-color: black;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;

        animation: myAnimation 4s infinite;

    }
    @keyframes myAnimation {
        5% { top: 0; left: 0; }
        25% { top: 200px; left: 0px; }
        50% { top: 200px; left: calc(100% - 320px); }
        75% { top: 0px; left: calc(100% - 320px); }
        100% { top: 0px; left: 0; }
    }

user_13573444 · Answer

In my solution, I used rule transform: translate() translateY() to prevent an animated object from creating an overflow.

In this solution, the second @keyframes with the name myAnimation2 was removed, since there was no point in this code.

Also, I reduced the size of the animated element for a better visual perception of the animation in my example.

body {
    margin: 0;
}

.box {
    width: 100px;
    height: 100px;
    border: 10px solid black;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: myAnimation 4s infinite;
}

@keyframes myAnimation {
    0% {
        top: 0;
        left: 0;
        transform: translate(0) translateY(0);
    }
    25% {
        top: 100%;
        left: 0;
        transform: translateX(0) translateY(-100%);
    }
    50% {
        top: 100%;
        left: 100%;
        transform: translateX(-100%) translateY(-100%);
    }
    75% {
        top: 0;
        left: 100%;
        transform: translateX(-100%) translateY(0);
    }
    100% {
        top: 0;
        left: 0;
        transform: translateX(0) translateY(0);
    }
}

user_7394871 · Answer

Consider using SMIL SVG
In my opinion, SMIL is a powerful and flexible animation platform that is easily customizable and does not require, like CSS animation, recalculation of timings when the application logic changes.

The flexibility of smil lies in the fact that it is enough to change the logical chains that determine the sequence of animations and this will make it possible to completely rebuild the application without spending significant effort in recalculating timings.

#1. Solution of the example from the question one ball moves to the corners of the page

Animation starts after click

# 2. Added pauses when the ball arrives at the corners

Pauses are implemented by repeating values in the values attribute

#3. Animation of two balls

The start of the second animation (red ball) is controlled by a logical chain

begin="anBlue.begin+3s"

In words, we can say that the animation of the red ball will start 3s after the start of the animation of the blue ball

[BONUS]

#4. Option with a chaotic rebound of balls from the sides of the box

user_8620333 · Answer

Easier idea using background with no complex keyframes:

.box {
  background:
    radial-gradient(farthest-side,black 97%,transparent) 
    top left/100px 100px /* simply adjust the values here to control the size of the circle */
    no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  animation: move 4s infinite;
}

@keyframes move {
  25% { background-position: bottom left  }
  50% { background-position: bottom right }
  75% { background-position: top    right }
}

Using css animation to make a div element move to each corner of the page

4 Answers