andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix typos

Browse Source
This commit is contained in:
atomiks
2018-03-06 20:13:17 +11:00
parent 9f3a8f4038
commit 772ab62511
4 changed files with 27 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/3df57813b7ec2de885ea6075ff46ed46.js
View File

File diff suppressed because one or more lines are too long

6
docs/index.html
View File

File diff suppressed because one or more lines are too long

15
index.html
View File

@ -121,10 +121,10 @@
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-of-type(2) {
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-of-type(3) {
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
</code></pre>
@ -170,14 +170,14 @@
<p>Note: <code>1rem</code> is usually <code>16px</code>.</p>
<ol>
<li>
<p><code>@keyframes</code> defines an animation that has two states, where the element changes <code>opacity</code>, and is translated up on the 2D plane using <code>transform: translateY()</code>.</p>
<p><code>@keyframes</code> defines an animation that has two states, where the element changes <code>opacity</code> and is translated up on the 2D plane using <code>transform: translateY()</code>.</p>
</li>
<li>
<p><code>.bouncing-loader</code> is the parent container of the bouncing circles and uses <code>display: flex</code> and <code>justify-content: center</code> to position them in the in the center.</p>
<p><code>.bouncing-loader</code> is the parent container of the bouncing circles and uses <code>display: flex</code> and <code>justify-content: center</code> to position them in the center.</p>
</li>
<li>
<p>Using <code>.bouncing-loader &gt; div</code>, we target the three child <code>div</code>s of the parent to be styled. The <code>div</code>s are given a width and height of <code>1rem</code>, using <code>border-radius: 50%</code> to turn
them from squares to circles.</p>
<p><code>.bouncing-loader &gt; div</code>, targets the three child <code>div</code>s of the parent to be styled. The <code>div</code>s are given a width and height of <code>1rem</code>, using <code>border-radius: 50%</code> to turn them from
squares to circles.</p>
</li>
<li>
<p><code>margin: 3rem 0.2rem</code> specifies that each circle has a top/bottom margin of <code>3rem</code> and left/right margin of <code>0.2rem</code> so that they do not directly touch each other, giving them some breathing room.</p>
@ -185,6 +185,9 @@
<li>
<p><code>animation</code> is a shorthand property for the various animation properties: <code>animation-name</code>, <code>animation-duration</code>, <code>animation-iteration-count</code>, <code>animation-direction</code> are used.</p>
</li>
<li>
<p><code>nth-child(n)</code> targets the element which is the nth child of its parent.</p>
</li>
<li>
<p><code>animation-delay</code> is used on the second and third <code>div</code> respectively, so that each element does not start the animation at the same time.</p>
</li>

14
snippets/bouncing-loader.md
View File

@ -37,10 +37,10 @@ Creates a bouncing loader animation.
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-of-type(2) {
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-of-type(3) {
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
```
@ -90,19 +90,21 @@ Creates a bouncing loader animation.
Note: `1rem` is usually `16px`.
1. `@keyframes` defines an animation that has two states, where the element changes `opacity`, and is translated up on the 2D plane using `transform: translateY()`.
1. `@keyframes` defines an animation that has two states, where the element changes `opacity` and is translated up on the 2D plane using `transform: translateY()`.
2. `.bouncing-loader` is the parent container of the bouncing circles and uses `display: flex`
and `justify-content: center` to position them in the in the center.
and `justify-content: center` to position them in the center.
3. Using `.bouncing-loader > div`, we target the three child `div`s of the parent to be styled. The `div`s are given a width and height of `1rem`, using `border-radius: 50%` to turn them from squares to circles.
3. `.bouncing-loader > div`, targets the three child `div`s of the parent to be styled. The `div`s are given a width and height of `1rem`, using `border-radius: 50%` to turn them from squares to circles.
4. `margin: 3rem 0.2rem` specifies that each circle has a top/bottom margin of `3rem` and left/right margin
of `0.2rem` so that they do not directly touch each other, giving them some breathing room.
5. `animation` is a shorthand property for the various animation properties: `animation-name`, `animation-duration`, `animation-iteration-count`, `animation-direction` are used.
6. `animation-delay` is used on the second and third `div` respectively, so that each element does not start the animation at the same time.
6. `nth-child(n)` targets the element which is the nth child of its parent.
7. `animation-delay` is used on the second and third `div` respectively, so that each element does not start the animation at the same time.
#### Browser support