transitions css

1-webkit-transition: all .3s ease-in-out;
2-moz-transition:    all .3s ease-in-out;
3-o-transition:      all .3s ease-in-out;
4-ms-transition:     all .3s ease-in-out;
5transition:         all .3s ease-in-out;

1<style>
2div {
3  background-color: blue;
4  padding: 40px;
5  color: white;
6  cursor: pointer;
7  -webkit-transition: all 0.5s 0s ease;
8  -moz-transition: all 0.5s 0s ease;
9  -o-transition: all 0.5s 0s ease;
10  transition: all 0.5s 0s ease;
11}
12/*transition: property duration timing-function delay|initial|inherit;*/
13
14.hidden {
15  visibility: visible;
16  opacity: 0.1;
17  max-width: 12%;
18}
19
20.hidden:hover {
21  visibility: visible;
22  opacity: 1;
23	max-width: 100%;
24}
25</style>
26
27<div class="hidden">HOVER ME!</div>

1/* Transition Transform */
2.section:hover {
3  transform: translateX(0px) translateY(75px);
4}
5
6.section {
7  transition: transform 500ms ease-in-out 25ms;
8}

1.selector {
2  transition: transform 1s;
3}

1div:hover {
2  background-color: #000;
3  transition: background-color 400ms;
4} 

1
2div {
3  transition: width 2s, height 2s, transform 2s;
4}