Use the animation-direction property to run animation in first backward and then forward. The property is used with the alternate-reverse animation value to achieve this.ExampleLive Demo                    div {             width: 150px;             height: 200px;             position: relative;             background-color: yellow;             animation-name: myanim;             animation-duration: 2s;             animation-direction: alternate-reverse;             animation-iteration-count: 3;          }          @keyframes myanim {             0% {background-color:green; left:0px; top:0px;}             50% {background-color:maroon; left:100px; top:100px;}             100% {background-color:gray; left:0px; top:0px;}          }                        

To delay an animation, use the CSS animation-delay property. You can try to run the following code to delay animationExampleLive Demo                    div {             width: 150px;             height: 200px;             background-color: yellow;             animation-name: myanim;             animation-duration: 2s;             animation-delay: 2s;          }          @keyframes myanim {             from {                background-color: green;             }             to {                background-color: blue;             }          }                        

Use the [attribute$=”value”] selector to select elements whose attribute value ends with a specified value i.e. “.htm” here.You can try to run the following code to implement the CSS [attribute$="value"] Selector,ExampleLive Demo                    [href$ = htm] {             border: 5px solid orange;             border-radius: 5px;          }                     Java Tutorial       Java Tutorial PDF    

To create a sticky navbar, use the position: sticky; property. You can try to run the following code to create a sticky navbar, ExampleLive Demo                    ul {             list-style-type: none;             position: sticky;             overflow: hidden;             top: 0;             width: 100%;          }          li {             float: left;       ... Read More

To set up different speed curves with transition-timing-function, you can try to run the following codeExampleLive Demo                    div {             width: 100px;             height: 100px;             background: red;             transition: width 4s;          }          #effect1 {             transition-timing-function: linear;          }          #effect2 {             transition-timing-function: ease-in;          }          #effect3 {             transition-timing-function: ease-out;          }          div:hover {             width: 250px;          }                     Transition Effect       Hover over the div elements and see the transition effect and the speed:       linear effect       ease-in effect       ease-out effect    

To set the name of the CSS property the transition effect is, use the CSS transition-property.In the below example, we have set the property as width and set the duration as well:ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition-property: width;             transition-duration: 3s;          }          div:hover {             width: 250px;          }                     Heading One       Hover over the below box to change its width.          

Use the transition-duration property in CSS to set how many seconds or milliseconds a CSS transition effect takes to complete −ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition-property: height;             transition-duration: 2s;          }          div:hover {             height: 200px;          }                     Heading One       Hover over the below box to change its height.          

Use the transition-duration property to set the duration of transitionExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition-property: height;             transition-duration: 2s;          }          div:hover {             height: 200px;          }                     Heading One       Hover over the below box to change its height.          

Use the transition-delay property to set a delay for the transition effect with CSS. You can try to run the following code to set a 1-second delay of transition:ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition: width 3s;             transition-delay: 2s;          }          div:hover {             width: 350px;          }                     Heading One       Hover over the below box to change its width. It begins with a delay of 2 seconds.          

Use the CSS transition property to set all the four transition properties into a single line. You can try to run the following code to work with the transition property −ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition: height 3s;          }          div:hover {             height: 250px;          }                     Heading One       Hover over the below box to change its height.