Front End Technology Articles - Page 632 of 860

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

The input type button can be a submit button or reset button. With CSS, we can style any button on a web page.You can try to run the following code to style input type button:ExampleLive Demo                    input[type=button] {             background-color: orange;             border: none;             text-decoration: none;             color: white;             padding: 20px 20px;             margin: 20px 20px;             cursor: pointer;          }                     Fill the below form,                Subject                    Student                              

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

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