1/* Transition is how much my element will take time to change his state
2 or apply a specific style on it at specific */
3.my-div{
4 background-color: #f00; /*Red*/
5 transition: 3s ease-in-out;
6 /* transition: .5s ease-in-out; [0.5 seconds] */
7}
8.my-div:hover{
9 background-color: #00f; /*Blue*/
10}
11/* .my-div background-color will be changed from red to blue in 3 seconds*/
1div {
2 transition: background-color 0.5s ease;
3 background-color: red;
4}
5div:hover {
6 background-color: green;
7}
1/* Simple CSS color transition effect on selector */
2
3div {
4 color: white;
5 background-color: black;
6}
7
8div:hover {
9 background-color: red;
10}
11
12
13/* Additional transition effects on selector */
14
15div {
16 background-color: black;
17 color: white;
18 height: 100px;
19 transition: width 1.5s, height 3s;
20 width: 100px;
21
22}
23
24div:hover {
25 background-color: red;
26 height: 300px;
27 width: 150px;
28}
29