css transition

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>

1transition: all 300ms ease-in-out;

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

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*/

1/*CSS Transition Syntax*/
2selector {
3 transition: property duration timing-function delay|initial|inherit; 
4}

1transition: property duration timing-function delay|initial|inherit;