trasition opacity

1/* Answer to: "css transition opacity" */
2
3/*
4  CSS transitions allows you to change property values smoothly,
5  over a given duration.
6*/
7
8.myClass {
9  vertical-align: top;
10  transition: opacity 0.3s; /* Transition should take 0.3s */
11  -webkit-transition: opacity 0.3s; /* Transition should take 0.3s */
12  opacity: 1; /* Set opacity to 1 */
13}
14
15.myClass:hover {
16  opacity: 0.5; /* On hover, set opacity to 2 */
17}
18
19/* 
20  From `opacity: 1;` to `opacity: 0.5;`, the transition time should
21  take 0.3 seconds as soon as the client starts to hover over the
22  element.
23*/

1.fade {
2   opacity: 1;
3   transition: opacity .25s ease-in-out;
4   -moz-transition: opacity .25s ease-in-out;
5   -webkit-transition: opacity .25s ease-in-out;
6   }
7
8   .fade:hover {
9      opacity: 0.5;
10      }

1/*
2Opacity transition in CSS
3
4By using this we can add element transition with some delay.
5And due to transition delay its look like animation of element.
6*/
7
8div {
9  transition: opacity 0.5s; /* Transition should take 0.3s */
10  -webkit-transition: opacity 0.5s; /* Transition should take 0.3s */
11  opacity: 1; /* Set opacity to 1 */
12}
13
14/*
15I hope it will help you.
16Namaste
17*/

1div {
2  transition: opacity seconds;
3}