CSS Articles - Page 115 of 160

Use the animation-fill-mode property to set a style for the element when the animation is not playingExampleLive Demo                    div {             width: 150px;             height: 200px;             position: relative;             background: red;             animation-name: myanim;             animation-duration: 2s;             animation-fill-mode: backwards;          }          @keyframes myanim {             from {left: 0px; background-color: green;}             to {left: 200px; background-color: blue;}          }                        

To select all elements, use the * CSS Selector. You can try to run the following code to select all the elements,ExampleLive Demo                    *{             color: blue;             background-color: orange;          }                     Demo Website       Learning       Tutorials on web dev, programming, database, networking, etc.       Every tutorials has lessons with illustrations and figures.    

To select elements whose attribute value begins with a specified value, use the [attribute^=”value”] selectorYou can try to run the following code to implement the [attribute^=”value”] selector,ExampleLive Demo                    [alt^=Tutor] {             border: 5px solid blue;             border-radius: 5px;          }                              

To select all the elements with id=”tutorials”, you can try to run the following code.Use the #id CSS selector to achieve this,ExampleLive Demo                    #tutorials {             border: 3px solid red;          }                     Tutorialspoint       Learning       Tutorials on web dev, programming, database, networking, etc.       Every tutorials has lessons with illustrations and figures.    

Use the animation-timing-function property, with the ease-out value to set animation with a slow end with CSSExampleLive 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-out effect    

Use the element+element selector to select elements placed after first specified element. You can try to run the following code to implement this,ExampleLive Demo                    div + p {             color: white;             background-color: blue;          }                     Demo Website       Fruits                This is demo text.             Fruits are good for health.       Fruits makes you healthy.    

Use the element > element selector to select an element with a parent element.You can try to run the following code to select all elements where the parent is a element,ExampleLive Demo                    div > p {             color: white;             background-color: blue;          }                     Demo Website       Fruits       Fruits are good for health.                This is demo text.          

Use the animation-timing-function property, with the linear value to set animation with the same speed from start to end 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;}          }          #demo {animation-timing-function: linear;}                     linear effect    

Use the animation-direction property to set whether an animation should be played forwards, backward or in alternate cycles:ExampleLive Demo                    div {             width: 150px;             height: 200px;             background-color: yellow;             animation-name: myanim;             animation-duration: 2s;             animation-direction: reverse;          }          @keyframes myanim {             from {                background-color: green;             }             to {                background-color: blue;             }          }                        

Use the animation-delay property to set a delay for the start of an animation with CSS:ExampleLive 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;             }          }