To implement animation on the color property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 200px;             height: 300px;             background: white;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;          }          @keyframes myanim {             20% {                bottom: 100px;                box-shadow: 30px 45px 70px orange;                color: blue;             }          }                     Performing Animation on color property       This is our demo div!    

To implement animation on the border-top-right-radius property with CSS, you can try to run the following codeExampleLive Demo                    table,th,td {             border: 2px solid black;          }          #newTable {             width: 500px;             height: 300px;             background: yellow;             border: 15px solid yellow;             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             30% {                background-color: orange;                border-spacing: 50px;                border-top-color: red;                border-top-right-radius: 150px;             }          }                     Performing Animation for border top right radius                             Subject             Student             Marks                                 PHP             Tom             90                                 Java             Henry             70                    

Use the repeating-radial-gradient() function to repeat radial gradient.You can try to run the following code to implement repeating-radial-gradient() function in CSSExampleLive Demo                    #demo {             height: 300px;             background: repeating-radial-gradient(green 20%, orange 40%, maroon 40%);          }                     Repeating radial gradient          

Use the justify-content property with value flex-start to align the flex-items at the beginning.You can try to run the following code to implement the flex-start valueExampleLive Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: flex-start;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Result                Rank1          Rank2          Rank3          Rank4          

To implement animation on the border-spacing property with CSS, you can try to run the following codeExampleLive Demo                    table,th,td {             border: 1px solid green;          }          #newTable {             width: 500px;             height: 300px;             background: yellow;             border: 15px solid yellow;             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             30% {                background-color: orange;                border-right-color: red;                border-right-width: 25px;                border-spacing: 50px             }          }                     Performing Animation for border spacing                             Subject             Student             Marks                                 Maths             Amit             98                                 Science             Sachin             99                    

To implement animation on border-right-width property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 300px;             background: yellow;             border: 15px solid yellow;             background-image: url('https://www.tutorialspoint.com/latest/cuda.png');             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             30% {                background-color: maroon;                border-right-color: red;                border-right-width: 25px;             }          }                     Performing Animation for border right width              

To define colors using the Hue-Saturation-Lightness model (HSL) with Opacity, use the hsla() CSS method.ExampleYou can try to run the following code to implement the hsla() function in CSSLive Demo                    h1 {             background-color:hsl(0,100%,50%);          }          h2 {             background-color:hsl(192,89%,48%);          }          p {             background-color:hsla(290,100%,50%,0.3);          }                     Red Background       Blue Background       This is demo text!    

Use the align-items property with value flex-start to align flex items on the top.You can try to run the following code to implement the flex-start valueExampleLive Demo                    .mycontainer {             display: flex;             height: 300px;             background-color: red;             align-items: flex-start;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          

Use the align-items property with value center to align flex items in the middle.ExampleYou can try to run the following code to implement the center valueLive Demo                    .mycontainer {             display: flex;             background-color: orange;             align-items: center;             height: 150px;             width: 600px;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

The nav-up property is used to move up when you have pressed on up arrow button in the keypad. You can try to run the following code to implement the CSS nav-up propertyExampleLive Demo                    button {             position: absolute;          }          button#btn1 {             top: 10%;             left: 15%;             nav-index: 1;             nav-right: #btn2;             nav-left: #btn4;             nav-down: #btn2;             nav-up: #btn4;          }          button#btn2 {             top: 30%;             left: 30%;             nav-index: 2;             nav-right: #btn3;             nav-left: #btn1;             nav-down: #btn3;             nav-up: #btn1;          }          button#btn3 {             top: 50%;             left: 15%;             nav-index: 3;             nav-right: #btn4;             nav-left: #btn2;             nav-down: #btn4;             nav-up: #btn2;          }          button#btn4 {             top: 30%;             left: 0%;             nav-index: 4;             nav-right: #btn1;             nav-left: #btn3;             nav-down: #btn1;             nav-up: #btn3;          }                     Result1       Result2       Result3       Result4