CSS3+HTML5 to realize the Solar system Planetary Revolution animation example

Simulation of the solar system, the final effect of the animation diagram is as follows:

CSS3 's animation is done in the form of keyframes, first setting an animation's running time, and then inserting keyframes at several locations on the timeline, and the browser makes a transition animation based on the content set by the key frame. Animation is generally combined with transform properties. Take a simple example to illustrate, with a Div, let it move from left to right, as shown on the left of the following image (need to click the picture to play)

Use CSS to draw a static diagram, and then add animation properties. Complete code for the entire project see this demo. HTML is as follows:

<div class= ' spaces ' >
<div class= ' wheel ' >
<span class= ' line ' ></span>
&L T;/div>
</div>

In the wheel wheel adds an animated property,

. wheel{
animation:move 3s linear infinite;

This means that the name of the animation is move, the time axis is 3s, speed is uniform, the number of playback unlimited. Then the move key frame keyframes is as follows:

@keyframes move{
100%{
Transform:translatex (350px);
}
}

When playing to the end, move to the X axis to the right 350px. At 0%, when the value of 0,100 is 350px, time is 3s, there is a speed curve properties, based on this information to do the transition animation. If the specified speed is linear linear, the animation transition effect is uniform, for the above is a uniform right shift. The default speed curve is ease, which is gradually and gradually out, the middle play faster.

Then add a scrolling effect to the wheel rotate, using the distance between the wheels and the circumference of the wheel to draw how many laps, that is, 375/(25 * 3.1415926 * 2) * 360 = 859.4 degrees, that is, in this interval to the right, plus the effect of rotation, So add one more rotate attribute to transform.

Transform:translatex (350px) rotate (859.4deg);

So it's OK:

This is the CSS3 animation animation, combined with transform size, rotation, displacement, skew, through two or three lines of code, you can make a lot of interesting results.

Next, we discuss the production of the solar system, which is different from the above where the planets revolve around the sun, and the wheels revolve around their center of the earth, which means they turn in different points. As can be seen, transform's base point defaults to its own center, so we're going to change the center Transform-origin of the planet's conversion. The full demo. The HTML structure of the solar system is as follows:

<div class= "Galaxy" >
<div class= ' Sun ' ></div> <div class= ' Mercury ' ></div>
   <div class= ' Venus ' ></div>
<div class= ' earth ' ></div>
</div>

The sun is in the middle of the Div galaxy, allowing the other planets to line up on the right side of the sun. Set the width and height of galaxy to 1300px. Sun Pictures are 100px*100px, so Sun's left and top values are both (1300-100)/2 = 600px, so Sun is in the middle position. The left value of the mercury Mercury is 700px,top 625px, so that Mercury is positioned on the right side of the sun. And then set Transform-origin:

Transform-origin: -50px 25px;

The origin of the transform-origin is the position of the upper-left corner of the action element, so move to the left (700-1300/2) = 50px, move Down 60/2 = 30px (60 for mercury altitude), and the base of mercury conversion becomes the center of the Sun, which rotates on this basis:

Animation:rotation 2.4s linear infinite;
@keyframes rotation{
to{
transform:rotate (1turn);
}
}

Note that the synonyms are changed here, and 0% and 100% are replaced with from and To,360deg 1turn respectively.

Other planets are set in this way, and the calculations are slightly cumbersome. The cycle of the revolution is based on the Earth 10s, and other proportional conversions. This will make a map of the solar System revolution, the principle is simple, the effect is very good.

Notice that the orbits of the planets are actually elliptical, with a positive circle. So, here's how to do an oval run trajectory. The effect chart is as follows:

The upper ellipse is flattened on the y-axis, consider adding a displacement transformation on the y-axis, as shown in the following illustration, first placing the Earth's initial position at the intersection of the ellipse and its short axis, and then Transform-origin set to the position of the center of the radius 800px, but the elapsed time is 50% Which is opposite to the initial position, insert a keyframe: do a displacement conversion, the negative direction of the y-axis to move 200px, so that you can form a half ellipse trajectory, to 100% gradually revert to the initial value of 0, as opposed to the previous half ellipse, you can complete a complete ellipse trajectory.

Need to wrap a layer of div outside the earth, used to set the effect of Translatey, because this effect of the time curve needs to be set to ease-in-out gradually out of the effect, so that the oval run more smoothly, if not set words rendered out of the animation will not be like elliptical trajectory. The structure of HTML is as follows:

<div class= ' planet ' >
<div class= ' origin-circle ' ></div>
<div class= ' Sun ' >&L  t;/div>
<div class= ' track ' ></div>
<div class= ' Movey ' >
<div Class= ' Earth ' ></div>
</div>
</div>

Add a Translatey animation to Movey, the rest of the same.

. movey{
animation:movey 2s ease-in-out infinite alternate;
@keyframes movey{
to{
transform:translatey ( -200px);
}
}

Note that the Movey cycle is set to half the rotation, while a transition-direction is used for alternate, alternate alternating, and the effect is equivalent to

@keyframes movey{
0%,100%{
transform:translatey (0px);
}
50%{
transform:translatey ( -200px);
}
}