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

rebuild docs

Browse Source
This commit is contained in:
atomiks
2018-03-04 14:24:22 +10:00
parent 0ae32ee91f
commit b2fffb4ead
14 changed files with 298 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
index.html
View File

@ -43,6 +43,7 @@
</section>
<section data-type="animation" class="sidebar__section">
<h4 class="sidebar__section-heading">animation</h4>
<a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a>
<a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a>
<a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a>
<a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
@ -80,6 +81,120 @@
<button class="tags__tag is-large " data-type="interactivity">
<i data-feather="edit-2"></i>interactivity</button>
</nav>
<div class="snippet">
<h3 id="bouncing-loader"><span>Bouncing loader</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
<p>Creates a bouncing loader animation.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="bouncing-loader"&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">@keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0.1;
transform: translateY(-1rem);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader &gt; div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader &gt; div:nth-of-type(2) {
animation-delay: 0.2s;
}
.bouncing-loader &gt; div:nth-of-type(3) {
animation-delay: 0.4s;
}
</code></pre>
<h4>Demo</h4>
<div class="snippet-demo">
<div class="snippet-demo__bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
</div>
<style>
@keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0.1;
transform: translateY(-1rem);
}
}
.snippet-demo__bouncing-loader {
display: flex;
justify-content: center;
}
.snippet-demo__bouncing-loader>div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.snippet-demo__bouncing-loader>div:nth-child(2) {
animation-delay: 0.2s;
}
.snippet-demo__bouncing-loader>div:nth-child(3) {
animation-delay: 0.4s;
}
</style>
<h4>Explanation</h4>
<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>
</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>
</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>
</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>
</li>
<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>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>
</ol>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
94.8%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li>
<a href="https://caniuse.com/#feat=css-animation" target="_blank">https://caniuse.com/#feat=css-animation</a>
</li>
</ul>
<!-- tags: animation -->
</div>
<div class="snippet">
<h3 id="box-sizing-reset"><span>Box-sizing reset</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
<p>Resets the box-model so that <code>width</code>s and <code>height</code>s are not affected by their <code>border</code>s or <code>padding</code>.</p>