1. CSS
CSS3 - animation

2. transition
<div id="wrap1">Hover me!</div>
#wrap1 {
width:200px;
transition: width 4s;
}
#wrap1:hover {
width:500px;
}

3. transition
#wrap1 {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
http://www.wisdomweb.ru/editor/wweditor.php?fname=css3_transition3
transition-timing-function Description
ease
Default value. Specifies a transition effect with a slow start, then fast,
then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
linear
Specifies a transition effect with the same speed from start to end
(equivalent to cubic-bezier(0,0,1,1))
ease-in
Specifies a transition effect with a slow start (equivalent to cubic-
bezier(0.42,0,1,1))
ease-out
Specifies a transition effect with a slow end (equivalent to cubic-
bezier(0,0,0.58,1))
ease-in-out
Specifies a transition effect with a slow start and end (equivalent to cubic-
bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n)
Define your own values in the cubic-bezier function. Possible values are
numeric values from 0 to 1

4. transform
#wrap1 {
transform: rotate(30deg);
}
• translate(50px, -20px)
• rotate(45deg)
• scale(2,4)
• skew(40deg,20deg)
• matrix(a, c, b, d, tx, ty) where a,d - scale, c,b - skew, tx,ty - translate
#wrap1 {
transform-origin:20% 40%; //default is 50% 50% 0
}

5. 3D transform
#wrap1 {
transform: rotateY(180deg);
}
#wrap2 {
transform: rotateX(180deg);
}
.transformed1 {
height: 130px;
width: 220px;
background-color: green;
transform: rotateY(60deg);
transform-style: preserve-3d;
}
.transformed2 {
height: 130px;
width: 220px;
transform: rotateY(120deg);
background-color: red;
}

6. 3D transform
#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:100px;
}
#div2 {
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateX(45deg);
}
#div1 {
perspective-origin: 10% 10%; //default is 50% 50%
}

7. 3D transform
.container {
width: 250px;
height: 250px;
background-color: green;
}
.visible,.hidden {
transform: rotateY(0deg);
width: 100px;
height: 100px;
margin: 5px;
background-color: red;
padding: 5px;
}
.hidden {
backface-visibility: hidden;
}

8. Animation
@keyframes anim {
from {margin-left:3px;}
to {margin-left:500px;}
}
#wrap1 {
animation:anim 4s 3;
}
animation-name: anim ;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: normal|reverse|alternate|alternate-reverse;
animation-play-state: paused|running;
Repeat 3 times for 4sec

9. Animation
@keyframes anim {
0% {
margin-left:3px;
margin-top:3px;
background-color:#7F0055;
}
30% {
margin-left:3px;
margin-top:250px;
background-color:#7F0055;
}
60% {
margin-left:500px;
margin-top:250px;
background-color:black;
}
100% {
margin-left:3px;
margin-top:3px;
background-color:#7F0055;
}
}

10. Hometask