Basic-HTML./annimation.css at main · Santosh-R8540/Basic-HTML. · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.box {
    height: 100px;
    width: 300px;
    background-color: pink;
    /* animation-name: colorAnimate;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-delay: 0;
    animation-iteration-count: 3;
    animation-direction: normal; */

    animation: widthAnimate 4s ease-in 0s 2 normal;


}

@keyframes colAnimate {
    0% {
       background-color: green;

     }
     50% {
        background-color: yellow;
     }
      80% {
        background-color: red;
     }
     100% {
        background-color: blue;
    }

}

@keyframes colAnimate {
     from {
        font-size: 20px;
     to {
        background-color: blue;
    }
  }

}
    @keyframes fontAnimation {
     from {
        font-size: 20px;
     }
      to {
        font-size: 40px;
    }
}