Use the [attribute|=”value”] selector to select elements with the specified attribute starting with a specified value.You can try to run the following code to implement CSS [attribute|=”value”] Selector,ExampleLive Demo                    [alt|=Tutor] {             border: 5px solid orange;             border-radius: 5px;          }                              

Use the animation-fill-mode property with the value both to extend the animation properties in both directions.ExampleLive Demo                    div {             width: 150px;             height: 200px;             position: relative;             background: red;             animation-name: myanim;             animation-duration: 2s;             animation-fill-mode: both;          }          @keyframes myanim {             from {left: 0px; background-color: green;}             to {left: 200px; background-color: blue;}          }                        

To set the fill-mode for an animation with CSS, use the animation-fill-mode property. It has the values forwards, backward, both for both the directions, etc.You can try to run the following code to set the fill-mode for animation;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 create a linear gradient that looks like rainbow color, you can try to run the following code - Example                    #demo {             height: 100px;             background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);          }                     Linear Gradient       Rainbow    

Use the animation-timing-function property, with the ease-in-out value to set animation with a slow start and end with CSS:ExampleLive Demo                    div {             width: 150px;             height: 200px;             position: relative;             background-color: #808000;             animation-name: myanim;             animation-duration: 2s;             animation-direction: alternate-reverse;             animation-iteration-count: 3;          }          @keyframes myanim {             from {left: 100px;}             to {left: 200px;}          }          #demo {animation-timing-function: ease-out;}                     ease-in-out effect    

To select all elements with class=”mydemo”, you can try to run the following code. Use the .class CSS selector to achieve this,ExampleLive Demo                    .demo {             border: 2px dashed orange;          }                     Heading 1       Heading 1       Heading 2    

Use the animation-timing-function to set the speed curve of the Animation. You can try to run the following code to set ease and ease-in animation effect: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 animation-timing-function property, with the ease value to set animation with a slow start, then fast, to end slowly with CSSExampleLive 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;}                     ease effect    

To select elements whose attribute value contains 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* = "tut"] {             border: 5px solid orange;             border-radius: 5px;          }                              

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;}          }