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