Skip to content

Instantly share code, notes, and snippets.

View oli's full-sized avatar

Oli Studholme oli

42 followers · 9 following
View GitHub Profile
@oli
oli / dabblet.css
Created December 2, 2012 09:11
Example 26 — animation-fill-mode (Figure 12-31)
/* Example 26 — animation-fill-mode (Figure 12-31) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1 {
font-weight: normal;
@oli
oli / dabblet.css
Created December 2, 2012 09:04
Example 25 — animation-direction (Figure 12-30)
/* Example 25 — animation-direction (Figure 12-30) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1 {
font-weight: normal;
@oli
oli / dabblet.css
Created December 2, 2012 08:55
Example 24 — animation-iteration-count (Figure 12-29)
/* Example 24 — animation-iteration-count (Figure 12-29) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1 {
font-weight: normal;
@oli
oli / dabblet.css
Created December 2, 2012 08:50
Example 23 — animation-delay (Figure 12-28)
/* Example 23 — animation-delay (Figure 12-28) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1 {
font-weight: normal;
@oli
oli / dabblet.css
Created December 2, 2012 08:45
Example 22 — Using animation-timing-function (Figure 12-27)
/* Example 22 — Using animation-timing-function (Figure 12-27) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1 {
font-weight: normal;
@oli
oli / dabblet.css
Created December 2, 2012 08:17
Example 21 — Controlling an animation Using @Keyframes (Figure 12-25)
/* Example 21 — Controlling an animation Using @keyframes (Figure 12-25) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1 {
font-weight: normal;
@oli
oli / dabblet.css
Created December 2, 2012 08:10
Example 20 — A simple animation (Figure 12-25)
/* Example 20 — A simple animation (Figure 12-25) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1 {
font-weight: normal;
@oli
oli / dabblet.css
Created December 2, 2012 08:02
Example 19 — Declaring CSS Animations
/* Example 19 — Declaring CSS Animations */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1 {
font-weight: normal;
@oli
oli / dabblet.css
Created December 2, 2012 07:53
Example 18 — CSS Transitions gotchas code samples
/* Example 18 — CSS Transitions gotchas code samples */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1,
h2 {
@oli
oli / dabblet.css
Created December 2, 2012 07:29
Example 17 — The transition-delay property (Figure 12-23)
/* Example 17 — The transition-delay property (Figure 12-23) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1,
h2 {