Front End Technology Articles - Page 633 of 860

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    

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

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