Created by Leijun Yang
CSS helps you to keep the informational content of a document separate from the details of how to display it. You keep the style separate from the content so that you can:
p {
margin: 5px 10px
font: arial;
text-align: top;
color: blue;
a {
display: outline;
transform: scale(1.2), rotate(-10deg);
animation: animation(delay-opacity 230ms ease-in);
}
Rather than attempting to shove dozens of updates into a single monolithic specification, it will be much easier and more efficient to be able to update individual pieces of the specification. Modules will enable CSS to be updated in a more timely and precise fashion, thus allowing for a more flexible and timely evolution of the specification as a whole.
CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.
#foo {
color: white;
padding: 5px 10px;
background: #9c3;
}
#foo:hover {
background: red;
}
Click me!
#foo2 {
color: white;
padding: 5px 10px;
background: #9c3;
/* The property to be transitioned (in this case, the background property */
transition-property: background;
/* How long the transition should last (2s) */
transition-duration: 2s;
/* How fast the transition happens over time (ease) */
transition-timing-function: ease;
}
#foo2:hover {
background: red;
}
Click me!
The timing function value allows the speed of the transition to change over time by defining one of six possibilities: ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier (which allows you to define your own timing curve).
Demo
#foo3 {
color: white;
padding: 5px 10px;
background: #9c3;
transition-property: background;
transition-duration: 2s;
transition-timing-function: ease;
/* Delay the transition by 3s */
transition-delay: 3s;
}
#foo3:hover {
background: red;
}
Click me!
a.foo {
padding: 5px 10px;
background: #9c3;
transition: background 0.3s ease 0.5s;
}
a.foo:hover {
background: #690;
}
CSS transforms allows elements styled with CSS to be transformed (translate,scale,rotate,skew) in two-dimensional or three-dimensional space.
div {
transform: translate(100px, 100px);
}
ul.gallery li a:hover img {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
ul.gallery2 li a:hover img {
-webkit-transform: scale(1.5) rotate(-10deg);
-moz-transform: scale(1.5) rotate(-10deg);
-o-transform: scale(1.5) rotate(-10deg);
transform: scale(1.5) rotate(-10deg);
}
div {
transform: rotateY(50deg);
}
Rotate 3D
CSS3 animation enables us to create animations without JavaScript by using a set of keyframes.
@keyframes wobble {
0% {left: 100px;}
40% {left: 150px;}
60% {left: 75px;}
100% {left: 100px;}
}
div {
animation-name: wobble;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 2;
}
animate.css
Create a pure CSS3 Cycle Slider
Example