rafts/blog/keyframes-are-fun/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ben Sanders Online Space</title>
    <link rel="stylesheet" href="/assets/css/main.css">
    <!-- Privacy-friendly analytics by Plausible -->
    <script async src="https://plausible.io/js/pa-JWiyAnkl2l96nMNDBD7OS.js"></script>
    <script>
    window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
    plausible.init()
    </script>
</head>
<body>
    <main>
        <header>
            <div class="wrap">
                <nav>
                    <a class="logo" href="/"><h1>Ben Sanders</h1></a>
                    <div class="nav-link">
                        <a href="/">Home</a>
                        <a href="/about">About</a>
                    </div>
                </nav>
            </div>
        </header>
<section id="post">
    <div class="wrap article-grid">
        <h2>Keyframes Are Fun</h2>
        <small class="meta">Benjamin Sanders | 25 August 2015 | css,keyframes</small>
        <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>
</section>
    </main>
    <footer>
        &copy; Ben Sanders, 2026
        <!-- Default Statcounter code for My Personal Website
        https://bensanders.net/ -->
        <script type="text/javascript">
        var sc_project=13339537; 
        var sc_invisible=1; 
        var sc_security="af47feaa"; 
        </script>
        <script type="text/javascript"
        src="https://www.statcounter.com/counter/counter.js"
        async></script>
        <noscript><div class="statcounter"><a title="Web Analytics
        Made Easy - Statcounter" href="https://statcounter.com/"
        target="_blank"><img class="statcounter"
        src="https://c.statcounter.com/13339537/0/af47feaa/1/"
        alt="Web Analytics Made Easy - Statcounter"
        referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
        <!-- End of Statcounter Code -->
        <a href="https://statcounter.com/p13339537/?guest=1">View My
        Stats</a>
    </footer>
    </body>
</html>