<header class="c-banner" id="top">
<a class="c-banner__skip" href="#main">Skip to content</a>
<p class="c-banner__title">
<a class="c-banner__home" href="/pages/" rel="home">24 ways <span>to impress your friends</span></a>
</p>
</header>
<div class="c-menu no-transition">
<button class="c-menu__button" id="menu__button" aria-controls="menu__drawer" aria-expanded="true" aria-label="Menu">
<svg class="c-menu__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
<rect class="c-menu__line" width="120" height="10" x="40" y="45" />
<rect class="c-menu__line" width="120" height="10" x="40" y="70" />
<rect class="c-menu__line" width="120" height="10" x="40" y="95" />
<rect class="c-menu__line" width="120" height="10" x="40" y="95" />
<rect class="c-menu__line" width="120" height="10" x="40" y="120" />
<rect class="c-menu__line" width="120" height="10" x="40" y="145" />
</svg>
</button>
<div class="c-menu__drawer" id="menu__drawer" role="region" aria-label="Menu">
<form class="c-search" role="search" id="search" action="/pages/search/">
<fieldset class="c-field">
<legend class="u-hidden">Search 24 ways</legend>
<label class="u-hidden" for="q">Keywords</label>
<input class="c-field__input" type="search" id="q" name="q" placeholder="e.g. CSS, Design, Research…" />
<button class="c-field__button" type="submit"><svg class="c-field__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" role="img" aria-label="Search">
<path role="presentation" d="M129 121C136 113 140 102 140 90c0-28-22-50-50-50S40 63 40 90s22 50 50 50c12 0 24-4 32-12L158 164l7-7-36-36zM90 130c-22 0-40-18-40-40s18-40 40-40 40 18 40 40-18 40-40 40z" />
</svg>
</button>
</fieldset>
</form>
<nav class="c-topics-nav" aria-label="Topics">
<ul class="c-topics-nav__items">
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/business/">
<svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<path d="M20 220c-11 0-20-9-20-20V70c0-11 9-20 20-20h60V35c0-10 5-15 15-15h50c10 0 15 5 15 15v15h60c11 0 20 9 20 20v130c0 11-9 20-20 20H20zm0-160c-5.5 0-10 4.5-10 10v130c0 5.5 4.5 10 10 10h200c5.5 0 10-4.5 10-10V70c0-5.5-4.5-10-10-10H20zm130-10V35c0-3-2-5-5-5H95c-3 0-5 2-5 5v15h60zM30 100V90h180v10H30zm0 40v-10h180v10H30zm0 40v-10h180v10H30z" />
</svg>
Business
</a>
</li>
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/code/">
<svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<path transform="rotate(45 120 120)" d="M115 100H70.5C63 85 47.5 75 30 75 8.5 75-9.5 90-14 110h29l10 10-10 10h-29c4.5 20 22.5 35 44 35 17.5 0 33-10 40.5-25h99.5c7.5 15 22.5 25 40.5 25 21.5 0 39.5-15 44-35h-29l-10-10 10-10h29c-4.5-20-22.5-35-44-35-17.5 0-33 10-40.5 25H125V30h10v-50h-30v50h10v70zm123.5 40c-6.5 9-17 15-28.5 15-16 0-29-10.5-33.5-25H63.5C59 144.5 46 155 30 155c-12 0-22.5-6-28.5-15H20l20-20-20-20H1.5C7.5 91 18 85 30 85c16 0 29 10.5 33.5 25h113c4.5-14.5 17.5-25 33.5-25 12 0 23 6 29 15h-19l-20 20 20 20h19zM115-10h10v30h-10v-30zM99.5 240v-50h-10v-10h25v-40h10v40h25v10H140v50c0 10-7.5 20-20 20-12.5 0-20-10-20.5-20zm11 0c0 7.5 5 10 10 10s10-2.5 10-10v-50h-20v50z" />
</svg>
Code
</a>
</li>
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/content/">
<svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<path d="M102.5 240l-1.5-2c-2.5-3.5-61-88-61-128s40.5-64 42.5-65L50 0h140l-32.5 45S200 70 200 110s-58.5 124.5-61 128l-1.5 2h-35zm30-10c9-13 57.5-85.5 57.5-120 0-33-35-56-41.5-60H91.5C85 54 50 77 50 110c0 34.5 48.5 106.5 57.5 120h25zM115 129.5c-11.5-2-20-12.5-20-24.5 0-14 11-25 25-25s25 11 25 25c0 12-8.5 22-20 24.5V230h-10V129.5zm5-39.5c-8 0-15 6.5-15 15s6.5 15 15 15 15-6.5 15-15-6.5-15-15-15zM92.5 40h55L170 10H70l22.5 30z" />
</svg>
Content
</a>
</li>
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/design/">
<svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<path fill-rule="evenodd" d="M140 0h80v240h-80V0zm70 10h-60v30h20v10h-20V70h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20v20h20v10h-20V230h60V10zM45 230c-14 0-25-11-25-25V60c0-1 35-55 35-55s35 54 35 55v145c0 14-11 25-25 25H45zm-15-25c0 8 7 15 15 15h20c8 0 15-7 15-15v-5H30v5zm0-25v10h50v-10H30zm0-106c0-2 2-4 4-4h2c2 0 4 2 4 4v96H30V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H50V74zm20 0c0-2 2-4 4-4h2c2 0 4 2 4 4v96H70V74zM30.5 60.5S39 58 45 63.5c6-4.5 14-4.5 20 0 6-5.5 14.5-3 14.5-3L69 45H41L30.5 60.5zm24.5-38L47.5 35h15L55 22.5z" />
</svg>
Design
</a>
</li>
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/process/">
<svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<path d="M210 116v4c0 49.5-40.5 90-90 90-29 0-55-14-71.5-35l7-7c14.5 19.5 38 32 64.5 32 44 0 80-36 80-80v-3.5l-15.5 16-7.5-7.5 28.5-28.5L234 125l-7.5 7.5L210 116zm-180 8v-4c0-49.5 40.5-90 90-90 29 0 54.5 13.5 71 35l-7 7C169 52.5 146 40 120 40c-44 0-80 36-80 80v5l17-17 7 7-28.5 28.5L7 115l7-7 16 16z" />
</svg>
Process
</a>
</li>
<li class="c-topics-nav__item">
<a class="c-topics-nav__label" href="/topics/ux/">
<svg width="16" height="16" viewBox="0 0 240 240" focusable="false" aria-hidden="true">
<path d="M220 240H20c-11 0-20-9-20-20V20C0 9 9 0 20 0h200c11 0 20 9 20 20v200c0 11-9 20-20 20zM20 10c-5 0-10 4-10 10v200c0 5 4 10 10 10h200c5 0 10-4 10-10V20c0-5-4-10-10-10H20zm150 200c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm-50 30c-11 0-20-9-20-20s9-20 20-20 20 9 20 20-9 20-20 20zm0-30c-5 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10zm45-30V80h10v70h-10zm0-100V30h10v20h-10zM65 80V30h10v50H65zm0 70v-40h10v40H65zm100 0v-20h10v20h-10zm0-50V30h10v70h-10zM50 110V80h40v30H50zm10-10h20V90H60v10zm90 30v-30h40v30h-40zm-50-50V50h40v30h-40zm10-10h20V60h-20v10zm50 50h20v-10h-20v10z" />
</svg>
UX
</a>
</li>
</ul>
</nav>
<nav class="c-site-nav" aria-label="Explore 24 ways">
<ul class="c-site-nav__items">
<li class="c-site-nav__item">
<a class="c-site-nav__label" href="/archives/">Archives</a>
</li>
<li class="c-site-nav__item">
<a class="c-site-nav__label" href="/authors/">Authors</a>
</li>
<li class="c-site-nav__item">
<a class="c-site-nav__label" href="/about/" aria-label="About this website">About</a>
</li>
</ul>
</nav>
</div>
<script class="c-menu__onload">
document.getElementById('menu__drawer').style.display = 'none';
</script>
</div>
<main class="c-main" id="main">
<section>
<header class="c-preface">
<h1 class="c-preface__title">2013
</h1>
<div class="c-preface__main">
<div class="s-prose">
<p>Scourge of browser vendors everywhere, WaSP buzzed its last in March. Dave Shea’s CSS Zen Garden celebrated its tenth anniversary in May, and Google Glass was released. Ever broad in its interests, 24 ways tamed Grunt, URLs and GitHub Pages, encouraged readers to write and publish books, and leavened all that with goodies on project management, web typography and SVG.</p>
</div>
</div>
</header>
<ol class="c-listing c-listing--summaries c-listing--inset">
<li>
<article class="c-summary c-summary--countdown h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2010/real-animation-using-javascript-css3-and-html5-video/">Real Animation Using JavaScript, CSS3, and HTML5 Video</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/danmall/">
<img class="u-photo" src="https://cloud.24ways.org/authors/danmall160.jpg" width="72" height="72" alt="" />
<span class="p-name">Dan Mall</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="http://danielmall.com/">Dan Mall</a> breathes life into web standards-based animation. By striving for more than just mechanical movement, we can create more believable animated effects to enhance our users’ experience.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
<li>
<article class="c-summary c-summary--countdown h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2010/real-animation-using-javascript-css3-and-html5-video/">Real Animation Using JavaScript, CSS3, and HTML5 Video</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/danmall/">
<img class="u-photo" src="https://cloud.24ways.org/authors/danmall160.jpg" width="72" height="72" alt="" />
<span class="p-name">Dan Mall</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="http://danielmall.com/">Dan Mall</a> breathes life into web standards-based animation. By striving for more than just mechanical movement, we can create more believable animated effects to enhance our users’ experience.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
<li>
<article class="c-summary c-summary--countdown h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2010/real-animation-using-javascript-css3-and-html5-video/">Real Animation Using JavaScript, CSS3, and HTML5 Video</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/danmall/">
<img class="u-photo" src="https://cloud.24ways.org/authors/danmall160.jpg" width="72" height="72" alt="" />
<span class="p-name">Dan Mall</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="http://danielmall.com/">Dan Mall</a> breathes life into web standards-based animation. By striving for more than just mechanical movement, we can create more believable animated effects to enhance our users’ experience.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
<li>
<article class="c-summary c-summary--countdown h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2010/real-animation-using-javascript-css3-and-html5-video/">Real Animation Using JavaScript, CSS3, and HTML5 Video</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/danmall/">
<img class="u-photo" src="https://cloud.24ways.org/authors/danmall160.jpg" width="72" height="72" alt="" />
<span class="p-name">Dan Mall</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="http://danielmall.com/">Dan Mall</a> breathes life into web standards-based animation. By striving for more than just mechanical movement, we can create more believable animated effects to enhance our users’ experience.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
<li>
<article class="c-summary c-summary--countdown h-entry day-15">
<header class="c-summary__header">
<h3 class="c-summary__title p-name"><a class="u-url" rel="bookmark" href="/2010/real-animation-using-javascript-css3-and-html5-video/">Real Animation Using JavaScript, CSS3, and HTML5 Video</a></h3>
<p class="c-summary__author p-author h-card">
<a class="c-summary__author-url u-url" href="/authors/danmall/">
<img class="u-photo" src="https://cloud.24ways.org/authors/danmall160.jpg" width="72" height="72" alt="" />
<span class="p-name">Dan Mall</span>
</a>
</p>
</header>
<div class="c-summary__main">
<p class="p-summary"><a href="http://danielmall.com/">Dan Mall</a> breathes life into web standards-based animation. By striving for more than just mechanical movement, we can create more believable animated effects to enhance our users’ experience.
</p>
</div>
<footer class="c-summary__footer">
<p class="c-summary__meta">
<time class="dt-published" datetime="2010-12-15T00:00:00-00:00">
15 <span>December 2010</span>
</time>
</p>
</footer>
</article>
</li>
</ol>
</section>
</main>
<nav class="c-traverse-nav" aria-label="Archive"><a class="c-traverse-nav__item" rel="prev" href="/2012/" aria-label="Previous: 2012">
<svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
<path d="M50 100l85 85 7-7-78-78 78-78-7-7" />
</svg>
</a><a class="c-traverse-nav__item" rel="next" href="/2014/" aria-label="Next: 2014">
<svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
<path d="M150 100l-85 85-7-7 78-78-78-78 7-7" />
</svg>
</a></nav>
<footer class="c-contentinfo">
<p class="c-contentinfo__social">
<a href="https://feeds.feedburner.com/24ways" rel="alternate">Grab our RSS feed</a>
<a href="https://twitter.com/24ways" rel="me">Follow us on Twitter</a>
<a href="https://github.com/24ways" rel="me">Contribute on GitHub</a>
</p>
<p class="c-contentinfo__copyright">
<small>© 2005-2016 24 ways and our authors</small>
</p>
</footer>
{% extends "@page" %}
{% block main %}
<section>
{% include "@preface" %}
{% render "@listing--inset", config %}
{% if results %}
{% render "@button--more" %}
{% endif %}
</section>
{% endblock %}
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": "year-2013",
"title": "2013",
"content": "Scourge of browser vendors everywhere, WaSP buzzed its last in March. Dave Shea's CSS Zen Garden celebrated its tenth anniversary in May, and Google Glass was released. Ever broad in its interests, 24 ways tamed Grunt, URLs and GitHub Pages, encouraged readers to write and publish books, and leavened all that with goodies on project management, web typography and SVG.\n",
"section": "archives",
"traverse": {
"type": "archive",
"prev": {
"url": "/2012/",
"title": "2012"
},
"next": {
"url": "/2014/",
"title": "2014"
}
},
"config": {
"mods": [
"summaries",
"inset"
],
"component": "summary",
"items": [
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": "day-15",
"href": "/2010/real-animation-using-javascript-css3-and-html5-video/",
"title": "Real Animation Using JavaScript, CSS3, and HTML5 Video",
"author": "Dan Mall",
"datetime": "2010-12-15T00:00:00-00:00",
"comments": 11,
"content": "[Dan Mall](http://danielmall.com/) breathes life into web standards-based animation. By striving for more than just mechanical movement, we can create more believable animated effects to enhance our users' experience.\n",
"mods": [
"countdown"
]
},
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": "day-15",
"href": "/2010/real-animation-using-javascript-css3-and-html5-video/",
"title": "Real Animation Using JavaScript, CSS3, and HTML5 Video",
"author": "Dan Mall",
"datetime": "2010-12-15T00:00:00-00:00",
"comments": 11,
"content": "[Dan Mall](http://danielmall.com/) breathes life into web standards-based animation. By striving for more than just mechanical movement, we can create more believable animated effects to enhance our users' experience.\n",
"mods": [
"countdown"
]
},
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": "day-15",
"href": "/2010/real-animation-using-javascript-css3-and-html5-video/",
"title": "Real Animation Using JavaScript, CSS3, and HTML5 Video",
"author": "Dan Mall",
"datetime": "2010-12-15T00:00:00-00:00",
"comments": 11,
"content": "[Dan Mall](http://danielmall.com/) breathes life into web standards-based animation. By striving for more than just mechanical movement, we can create more believable animated effects to enhance our users' experience.\n",
"mods": [
"countdown"
]
},
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": "day-15",
"href": "/2010/real-animation-using-javascript-css3-and-html5-video/",
"title": "Real Animation Using JavaScript, CSS3, and HTML5 Video",
"author": "Dan Mall",
"datetime": "2010-12-15T00:00:00-00:00",
"comments": 11,
"content": "[Dan Mall](http://danielmall.com/) breathes life into web standards-based animation. By striving for more than just mechanical movement, we can create more believable animated effects to enhance our users' experience.\n",
"mods": [
"countdown"
]
},
{
"site": {
"title": "24 ways",
"handle": "24ways",
"description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
"url": "https://24ways.org",
"feed": "https://feeds.feedburner.com/24ways",
"theme_color": "#f04"
},
"theme": "day-15",
"href": "/2010/real-animation-using-javascript-css3-and-html5-video/",
"title": "Real Animation Using JavaScript, CSS3, and HTML5 Video",
"author": "Dan Mall",
"datetime": "2010-12-15T00:00:00-00:00",
"comments": 11,
"content": "[Dan Mall](http://danielmall.com/) breathes life into web standards-based animation. By striving for more than just mechanical movement, we can create more believable animated effects to enhance our users' experience.\n",
"mods": [
"countdown"
]
}
]
}
}
There are no notes for this item.