The following effects are required recently

Starting with css3D rotation, you can only achieve the following effect

I can’t do it in 3D, I can only do it in 2D, as long as I do it in ellipse rotation

1. The X-axis and Y-axis move in a rectangle

The path is a slash

.ball { animation: animX 2s linear infinite alternate, animY 2s linear infinite alternate } @keyframes animX{ 0% {left: 0px; } 100% {left: 500px; } } @keyframes animY{ 0% {top: 0px; } 100% {top: 300px; }}Copy the code

2. Set animation delay

Set the Y-axis animation delay to half the animation time (the delay is set to negative and there will be no delay blank at the beginning of the animation, if you are interested, you can try positive delay), and you can see that the motion path becomes a diamond

 .ball {
    animation: 
      animX 2s linear 0s infinite alternate,
      animY 2s linear -1s infinite alternate
  }
Copy the code

3. Set the Bezier curve three times

.ball { animation: AnimX 2s Cubic bezier(0.36, 0, 0.64, 1) -1s infinite alternate, animY 2s Cubic Bezier (0.36, 0, 0.64, 1) 1) 0s infinite alternate }Copy the code

4. Zoom in and out

Add the scale property to make it look three-dimensional. The scale animation should be the sum of the X and Y axes

.ball1 { animation: AnimX 2s Cubic bezier(0.36, 0, 0.64, 1) -1s infinite alternate, animY 2s Cubic Bezier (0.36, 0, 0.64, 1) 1) 0s infinite alternate, scale 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate; } @keyframes scale {0% {transform: scale(0.7)} 50% {transform: scale(1)} 100% {transform: scale(0.7)}}Copy the code

And you’re done!

Effect of address

Full effect address

It would be my pleasure to be of any help to you. If have unreasonable place also ask everybody to give directions a lot.