diff options
| author | Benjamin Sanders <ben@sanders.life> | 2025-02-07 07:33:31 -0500 |
|---|---|---|
| committer | Benjamin Sanders <ben@sanders.life> | 2025-02-07 07:33:31 -0500 |
| commit | a77bde84e2659d9df4899da8a5f31136372398cc (patch) | |
| tree | fd7d1e47cc5ef23f1f11d34c70a099d9fa4f5b7b /_site/blog/keyframes-are-fun | |
initial commit
Diffstat (limited to '_site/blog/keyframes-are-fun')
| -rw-r--r-- | _site/blog/keyframes-are-fun/index.html | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/_site/blog/keyframes-are-fun/index.html b/_site/blog/keyframes-are-fun/index.html new file mode 100644 index 0000000..73ac796 --- /dev/null +++ b/_site/blog/keyframes-are-fun/index.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta content="Ben's Corner of the Web" property="og:title"> + <meta content="Ben is a GNU/Linux nerd and these are his links" property="og:description"> + <meta content="https://ben.sanders.life" property="og:url"> + <meta content="https://bsand.net/assets/me.jpeg" property="og:image"> + <meta content="#b172bc" data-react-helmet="true" name="theme-color"> + <link rel="stylesheet" href="/main.css"> + <title>Ben's Website</title> +</head> + +<body> + <div id="website-container"> + <ul class="navigation"> + <li><a href="/" title="home">~/</a></li> + <li><a href="/about" title="about me">~/about</a></li> + <li><a href="/resume" title="my resume">~/resume</a></li> + <li><a href="/blog" title="my blog">~/blog</a></li> + <li><a href="/resources" title="resources">~/resources</a></li> + </ul> + + + <h1>Keyframes Are Fun</h1> + <p class="meta">Benjamin Sanders | 25 August 2015 | css,keyframes</p> + <p>Keyframes in HTML5 is fun. Well, I mean, coding is fun in general especially once you can get into “the zone” but the idea of making your website come alive is fun.</p> + +<p>Key Frames</p> + +<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@keyframes</span> <span class="n">fadein</span> <span class="p">{</span> +<span class="nt">from</span> <span class="p">{</span> <span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> +<span class="nt">to</span> <span class="p">{</span> <span class="nl">opacity</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span> <span class="p">}</span> +<span class="p">}</span> +</code></pre></div></div> + +<p>I mean all I have to do is insert something like the above into my style.css document and it will make the class or id fade in on-load. Anyway that is just a quick update to what I’ve been doing with this site lately - I’ll keep you all posted as I design the site some more.</p> + + </div> + <footer> + <small>© Ben Sanders, 2025</small> + </footer> + <!-- <script src="./index.js"></script> --> + + +</body> +</html> |