javascript - How to realize this dot animation using CSS or JS? - Stack Overflow

admin管理员组

文章数量:1023895

This GIF es from dribbble.

I've tried to write a demo with pure CSS, here's part of my codes:

@keyframes circles{
  0%{
    transform: scale(0) rotate(150deg);
  }
  100%{
    transform: scale(1) rotate(0deg);
  }
}

They won't rotate as a whole.

The mixing animation at the center of the gif is not required, I just want to realize the rotating effect.

Hope someone can help me.

This GIF es from dribbble.

I've tried to write a demo with pure CSS, here's part of my codes:

@keyframes circles{
  0%{
    transform: scale(0) rotate(150deg);
  }
  100%{
    transform: scale(1) rotate(0deg);
  }
}

They won't rotate as a whole.

The mixing animation at the center of the gif is not required, I just want to realize the rotating effect.

Hope someone can help me.

• javascript
• css

Share Improve this question Follow asked Jul 8, 2016 at 4:06 Jc.Jc. 21411 silver badge99 bronze badges 2

• I don't know if that means anything to you, but I like yours better. – Angel Politis Commented Jul 8, 2016 at 4:11
• @AngelPolitis I want them to rotate from the center as a whole. – Jc. Commented Jul 8, 2016 at 4:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This is a pound or nested movement. The break down is:

• The dots themselves are just sliding along a straight line inwards and scaling a little bit as they travel
• Each dot's start time is offset slightly from the last so they appear to travel in sequence, which gives the illusion of a swirl.
• Finally, the dots would all be grouped under a parent element who's only job is to rotate.

Following this approach, you can easily apply simple translation and rotation animations to each element and still get this swirling effect.

This is a bit late, but here is my jsfiddle following @Soviut's answer

https://jsfiddle/hfpymtba/

The 'spin' animation is applied to the container

@keyframes spin{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

The 'graviton' animation is applied to the circle classes

@keyframes graviton{
  100%{
    top:50%;
    left:50%;
  }
}

There is a bit of wobble as the circles aren't perfectly around the centre of the container.

This GIF es from dribbble.

I've tried to write a demo with pure CSS, here's part of my codes:

@keyframes circles{
  0%{
    transform: scale(0) rotate(150deg);
  }
  100%{
    transform: scale(1) rotate(0deg);
  }
}

They won't rotate as a whole.

The mixing animation at the center of the gif is not required, I just want to realize the rotating effect.

Hope someone can help me.

This GIF es from dribbble.

I've tried to write a demo with pure CSS, here's part of my codes:

@keyframes circles{
  0%{
    transform: scale(0) rotate(150deg);
  }
  100%{
    transform: scale(1) rotate(0deg);
  }
}

They won't rotate as a whole.

The mixing animation at the center of the gif is not required, I just want to realize the rotating effect.

Hope someone can help me.

• javascript
• css

Share Improve this question Follow asked Jul 8, 2016 at 4:06 Jc.Jc. 21411 silver badge99 bronze badges 2

• I don't know if that means anything to you, but I like yours better. – Angel Politis Commented Jul 8, 2016 at 4:11
• @AngelPolitis I want them to rotate from the center as a whole. – Jc. Commented Jul 8, 2016 at 4:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This is a pound or nested movement. The break down is:

• The dots themselves are just sliding along a straight line inwards and scaling a little bit as they travel
• Each dot's start time is offset slightly from the last so they appear to travel in sequence, which gives the illusion of a swirl.
• Finally, the dots would all be grouped under a parent element who's only job is to rotate.

Following this approach, you can easily apply simple translation and rotation animations to each element and still get this swirling effect.

This is a bit late, but here is my jsfiddle following @Soviut's answer

https://jsfiddle/hfpymtba/

The 'spin' animation is applied to the container

@keyframes spin{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

The 'graviton' animation is applied to the circle classes

@keyframes graviton{
  100%{
    top:50%;
    left:50%;
  }
}

There is a bit of wobble as the circles aren't perfectly around the centre of the container.

本文标签： javascriptHow to realize this dot animation using CSS or JSStack Overflow