- New features often get better performance
- Forward compatibility
- Quicker development
background:
-moz-linear-gradient(top, black 0%, #777 50%, #444 51%, white 100%);
background:
-webkit-gradient(linear, left top, left bottom,
color-stop(0%,black), color-stop(50%,#777),
color-stop(51%,#444), color-stop(100%,white));
background:
-webkit-linear-gradient(top, black 0%, #777 50%, #444 51%, white 100%);
background:
-o-linear-gradient(top, black 0%, #777 50%, #444 51%, white 100%);
background:
-ms-linear-gradient(top, black 0%, #777 50%, #444 51%, white 100%);
background:
linear-gradient(top, black 0%, #777 50%, #444 51%, white 100%);
background:
linear-gradient(top,
black 0%,
#777 50%,
#444 51%,
white 100%
)
transform: function(param, param);
-moz-transform: rotate(33deg);
-webkit-transform: rotate(33deg);
-ms-transform: rotate(33deg);
-o-transform: rotate(33deg);
transform: rotate(33deg);
rotate
scale
skew
translate
matrix
rotate
transform: rotate(33deg);
scale
transform: scale(2.0, 1.5);
skew
transform: skew(33deg);
translate
transform: translate(100px);
matrix
transform: matrix(1, -0.2,
0, 1,
0, 0);
transform: translate(100px)
rotate(45deg);
translate3d
scale3d
rotate3d
perspective
rotate3d
transform: rotate3d(0.2, 0.5,
0.0, 45deg);
:hover
states
div {
background: blue;
transition-property: background;
transition-duration: 1000ms;
transition-timing-function: ease;
transition-delay: 0;
}
div:hover {
background: red;
}
:hover
states
div {
background: blue;
transition: background 1000ms;
}
div:hover {
background: red;
}
div {
background: blue;
transition: background 1000ms;
}
div.on {
background: red;
}
$("div").click(function () {
$(this).addClass("on");
});
<nav>
<ul>
<li>
Item 1
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
<li>Item 1.4</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>
nav > ul > li:hover {
width: 250px;
position: relative;
}
nav > ul > li > ul {
display: none;
position: absolute;
top: 22px;
right: 0;
}
nav > ul > li:hover > ul {
display: block;
}
nav > ul > li {
transition: width 500ms;
}
nav > ul > li > ul {
display: block;
opacity: 0;
pointer-events: none;
transition: opacity 500ms;
}
nav > ul > li:hover > ul {
opacity: 1;
pointer-events: auto;
}
#ball {
border: solid 10px blue;
border-radius: 10px;
position: absolute;
width: 0;
height: 0;
left: 140px;
top: 0;
}
@keyframes ball {
0% { left: 140px; top: 0; }
25% { left: 280px; top: 140px; }
50% { left: 140px; top: 280px; }
75% { left: 0; top: 140px; }
100% { left: 140px; top: 0; }
}
#ball {
animation: ball 5s linear infinite;
}
@keyframes rainbow {
0% { background: red; }
14% { background: orange; }
29% { background: yellow; }
43% { background: green; }
57% { background: aqua; }
71% { background: #4b0082; }
85% { background: #ee82ee; }
100% { background: red; }
}
#button:target {
animation: rainbow 3s infinite linear;
}
modernizr.js
no-js
class to your html
elementno-js
Modernizr
objectModernizr.touch
is
nav > ul > li {
width: 100px;
}
nav > ul > li:hover {
width: 250px;
}
nav > ul > li {
transition: width 500ms;
}
$("nav > ul > li").hover(function () {
$(this).animate({ width: 250 }, 500);
}, function () {
$(this).animate({ width: 100 }, 500);
});