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 07:23
Example 16 — transition-timing-function with cubic-bezier() values
/* Example 16 — transition-timing-function with cubic-bezier() values */
/* 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:07
Example 15 — transition-timing-funtion presets (Figure 12-20)
/* Example 15 — transition-timing-funtion presets (Figure 12-20) */
/* 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 06:55
Example 14 — Controlling the duration of a transition with transition-duration (Figure 12-18)
/* Example 14 — Controlling the duration of a transition with transition-duration (Figure 12-18) */
/* 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 05:41
Example 13 — Faking animating to/from auto (Figure 12-17)
/* Example 13 — Faking animating to/from auto (Figure 12-17) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
/* Comment out transition while editing CSS ;) */
figure .box {
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-ms-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
transition: all .4s ease-out;
}
@oli
oli / dabblet.css
Created December 2, 2012 05:26
Example 12 — backface-visibility (Figure 12-15)
/* Example 12 — backface-visibility (Figure 12-15) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
/* Comment out transition while editing CSS ;) */
body {
width: 80%;
max-width: 42em;
margin: auto;
font: 1em/1.5 Georgia, serif;
}
h1 {
@oli
oli / dabblet.css
Created December 2, 2012 05:18
Example 11 — Changing transforms with a 3D transform-origin (Figure 12-14)
/* Example 11 — Changing transforms with a 3D transform-origin (Figure 12-14) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
/* Comment out transition while editing CSS ;) */
figure div, figure span {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
@oli
oli / dabblet.css
Created December 1, 2012 14:31
Example 10 — Changing transforms with a 2D transform-origin (Figure 12-13)
/* Example 10 — Changing transforms with a 2D transform-origin (Figure 12-13) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
/* Comment out transition while editing CSS ;) */
figure div, figure span {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
@oli
oli / dabblet.css
Created December 1, 2012 14:19
Example 9 — perspective and transform:perspective() (Figure 12-12)
/* Example 9 — perspective and transform:perspective() (Figure 12-12) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
/* Comment out transition while editing CSS ;) */
figure .box {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
@oli
oli / dabblet.css
Created December 1, 2012 14:01
Example 8 — transform: matrix() (Figure 12-10 and 12-11)
/* Example 8 — transform: matrix() (Figure 12-10 and 12-11) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
/* Comment out transition while editing CSS ;) */
#matrix1 div,
#matrix2 div {
width: 100px;
height: 100px;
border: 3px solid #000;
border-radius: .5em;
background: #fff;
@oli
oli / dabblet.css
Created December 1, 2012 13:40
Example 7 — transform: skew (Figure 12-7)
/* Example 7 — transform: skew (Figure 12-7) */
/* From Beginning HTML5 and CSS3 — The Web Evolved http://thewebevolved.com/ */
/* Comment out transition while editing CSS ;) */
#skew1 div, #skew1 span {
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}