css transition syntax

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
2div {
3  transition: width 2s, height 2s, transform 2s;
4} 

1/* 
2To create a transition effect, you must specify three things:
3  transition: (transition-property) (transition-duration) (transition-delay) (transition-timing-function)
4  transition: all 0.5s ease-out
5
6transition-property:
7    Specifies the name of the CSS property the transition effect is for, by default it's none
8    the property could be: width, height, background-color, color, font-size, opacity etc, by applying "all" keyword, it applies on all properties
9    transition-property: background-color; --> aply on background only
10    transition-property: all; --> apply on all
11
12transition-duration:
13    Specifies how many seconds or milliseconds a transition effect takes to complete
14    
15transition-delay:
16    Specifies a delay (in seconds) for the transition effect
17
18transition-timing-function property
19    ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
20    ease-in - specifies a transition effect with a slow start
21    ease-out - specifies a transition effect with a slow end
22    ease-in-out - specifies a transition effect with a slow start and end
23*/
24
25/* transition scale example*/
26.trans_scale {
27    transition-delay: 0s;
28    transition-property: box-shadow, background-color, transform;
29    transition-duration: 0.3s;
30    transition-timing-function: ease-out;
31    /* OR */
32    /* transition: all 0.3s 0s ease-out; */
33    /* transition: 0.3s;
34  /* transition: transform 0.5s; */
35}
36
37.trans_scale:hover {
38    transform: scale(1.02, 1.03);
39    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
40    background-color: #f2efe3ff;
41}

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

1transition: property duration transition-timing-function delay; 
2/*Shorthand Property*/