transition css

1div {
2  transition: all 0.5s ease;
3  background: red;
4  padding: 10px;
5}
6div:hover {
7  background: green;
8  padding: 20px;
9}

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<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/* Transition Transform */
2.section:hover {
3  transform: translateX(0px) translateY(75px);
4}
5
6.section {
7  transition: transform 500ms ease-in-out 25ms;
8}

1div:hover {
2  background-color: #000;
3  transition: background-color 400ms;
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}
42