Front End Technology Articles - Page 613 of 860

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

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

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

To implement animation on the border-color property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 300px;             background: yellow;             border: 10px solid gray;             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             20% {                border-color: red;             }          }                     Performing Animation for color of border          

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

Use the @keyframes to animate the background position. To implement animation on background-position property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 400px;             background: yellow;             background-image: url('https://www.tutorialspoint.com/latest/microservice_architecture.png');             animation: myanim 3s infinite;             background-position: bottom left;          }          @keyframes myanim {             20% {                background-color: maroon;                background-position: bottom right;             }          }                        

To implement animation on the background-color property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 400px;             height: 300px;             background: yellow;             animation: myanim 3s infinite;          }          @keyframes myanim {             20% {                background-color: maroon;             }          }                        

Use the @keyframes to animate. To implement animation on background with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 400px;             height: 300px;             animation: myanim 3s infinite;          }          @keyframes myanim {             30% {                background: green bottom right/50px 50px;             }          }                        

Set the length of a flex item with the flex-basis CSS property.ExampleYou can try to run the following code to implement the flex-basis property −Live Demo                    .mycontainer {             display: flex;             background-color: orange;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          Q9          

The flex-shrink property shrinks the flex-item.You can try to run the following code to implement the CSS flex-shrink property. ExampleLive Demo                    .mycontainer {             display: flex;             background-color: orange;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          Q9