You can try to run the following code to implement the animation-timing-function property: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 {             from {left: 100px;}             to {left: 200px;}          }          #demo1 {animation-timing-function: ease;}          #demo2 {animation-timing-function: ease-in;}                     ease effect       ease-in effect    

Use the [attribute ~= "value"] selector to select elements with an attribute value containing a specified word with CSS.You can try to run the following code to implement the [attribute ~= "value"] selector. Here, the word we are searching is “Tutorials”,ExampleLive Demo                    [alt ~= Tutorials] {             border: 5px solid orange;             border-radius: 5px;          }                              

Use the animation-play-state property to set whether the animation is running or paused.You can try to run the following code to implement the animation-play-state property:ExampleLive Demo                    div {             width: 150px;             height: 200px;             position: relative;             background: red;             animation-name: myanim;             animation-duration: 2s;             animation-play-state: paused;          }          @keyframes myanim {             from {left: 0px; background-color: green;}             to {left: 100px; background-color: blue;}          }                        

Use the animation-name property to set the name of the @keyframes animation.You can try to run the following code to implement the animation-name property:ExampleLive Demo                    div {             width: 150px;             height: 200px;             background-color: yellow;             animation-name: myanim;             animation-duration: 3s;             animation-delay: 3s;          }          @keyframes myanim {             from {                background-color: green;             }             to {                background-color: blue;             }          }                        

Use the animation-iteration-count property to set the number of times an animation should be played with CSS.You can try to run the following code to implement the animation-iteration-count propertyExampleLive 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 {             from {left: 100px;}             to {left: 200px;}          }          #demo1 {animation-timing-function: ease;}          #demo2 {animation-timing-function: ease-in;}                     ease effect       ease-in effect    

The shorthand property to set all the animation properties is animation. It sets the animation duration, animation name, etc.You can try to run the following code to learn how to work with Animation Shorthand property:ExampleLive Demo                    div {             width: 150px;             height: 200px;             background-color: yellow;             animation: myanim 2s          }          @keyframes myanim {             from {                background-color: green;             }             to {                background-color: blue;             }          }                        

Use the CSS background-origin property to set the border-box value. With the border-box value, the background image begins from the upper left corner of the border.You can try to run the following code to implement the border-box value:ExampleLive Demo                    #value1 {             border: 3px solid blue;             padding: 30px;             background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);             background-repeat: no-repeat;             background-origin: padding-box;          }     ... Read More

Use the [attribute*=”value”] selector to select elements whose attribute value contains a specified value.You can try to run the following code to implement the CSS [attribute*="value"] selector,ExampleLive Demo                    [href* = java] {             border: 5px solid orange;             border-radius: 5px;          }                     PHP Tutorial       Java Tutorial    

To set the elements to retain the style values set by the first keyframe, use the animation-fill-mode property with the forwards value.ExampleLive Demo                    div {             width: 150px;             height: 200px;             position: relative;             background: red;             animation-name: myanim;             animation-duration: 2s;             animation-fill-mode: forwards;          }          @keyframes myanim {             from {left: 0px; background-color: green;}             to {left: 200px; background-color: blue;}          }                        

To select elements whose attribute value ends with a specified value, use the [attribute$ = ”value”] selector.You can try to run the following code to implement the CSS [attribute$ = "value"] Selector,ExampleLive Demo                    [alt$ = Connect] {             border: 5px solid blue;             border-radius: 5px;          }