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