Front End Technology Articles - Page 634 of 860

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

To delay an animation, use the CSS animation-delay property. You can try to run the following code to delay animationExampleLive 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;             }          }                        

Use the [attribute$=”value”] selector to select elements whose attribute value ends with a specified value i.e. “.htm” here.You can try to run the following code to implement the CSS [attribute$="value"] Selector,ExampleLive Demo                    [href$ = htm] {             border: 5px solid orange;             border-radius: 5px;          }                     Java Tutorial       Java Tutorial PDF    

To create a sticky navbar, use the position: sticky; property. You can try to run the following code to create a sticky navbar, ExampleLive Demo                    ul {             list-style-type: none;             position: sticky;             overflow: hidden;             top: 0;             width: 100%;          }          li {             float: left;       ... Read More

To set up different speed curves with transition-timing-function, you can try to run the following codeExampleLive Demo                    div {             width: 100px;             height: 100px;             background: red;             transition: width 4s;          }          #effect1 {             transition-timing-function: linear;          }          #effect2 {             transition-timing-function: ease-in;          }          #effect3 {             transition-timing-function: ease-out;          }          div:hover {             width: 250px;          }                     Transition Effect       Hover over the div elements and see the transition effect and the speed:       linear effect       ease-in effect       ease-out effect