CSS Articles - Page 114 of 160

Use the animation-direction property to set whether an animation should be played forwards, backward or in alternate cycles.You can try to run the following code to implement the animation-direction property: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;             }          }                        

To set-top tooltip, use the bottom CSS property.You can try to run the following code to set-top tooltip to a text:ExampleLive Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          bottom: 100%;          left: 60%;          margin-left: -90px;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;          margin-top: 50px;       }       .mytooltip:hover .mytext {          visibility: visible;       }               Keep mouse cursor over me           My Tooltip text          

Use the transition-delay property to delay the transition effect with CSS. You can try to run the following code to set a 1 second delay of transition:ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition: width 3s;             transition-delay: 1s;          }          div:hover {             width: 250px;          }                     Heading One       Hover over the below box to change its width. It begins with a delay of 1 second.          

Use the transition-timing-function property to set the speed curve of the transition effect. The values you can set are ease, ease-in, ease-out, linear, etc.You can try to run the following code to set the speed curve of the transition effect with CSSExampleLive Demo                    div {             width: 100px;             height: 100px;             background: red;             transition: width 4s;          }          #effect1 {             transition-timing-function: linear;          }          #effect2 {             transition-timing-function: ease-in;          }          div:hover {             width: 250px;          }                     Transition Effect       Hover over the div elements and see the transition effect and the speed:       linear effect       ease-in effect    

To select elements, use the element selector. You can try to run the following code to select elements:ExampleLive Demo                    p {             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 set right tooltip, use the left CSS property.You can try to run the following code to set right tooltip to a textExampleLive Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          top: -6px;          left: 100%;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;       }       .mytooltip:hover .mytext {          visibility: visible;       }               Keep mouse cursor over me           My Tooltip text          

To position tooltips correctly, use the right, left, top and bottom properties.Let us see how to position tooltips on the right:ExampleLive Demo           .mytooltip .mytext {          visibility: hidden;          width: 140px;          background-color: blue;          color: #fff;          z-index: 1;          top: -6px;          left: 100%;          text-align: center;          border-radius: 6px;          padding: 5px 0;          position: absolute;       }       .mytooltip {          position: relative;          display: inline-block;       }       .mytooltip:hover .mytext {           visibility: visible;       }               Keep mouse cursor over me           My Tooltip text          

You can try to run the following code to create a tooltip visible on mouse over. Use the visibility propertyExampleLive demo           #mytooltip #mytext {          visibility: hidden;          width: 100px;          background-color: black;          color: #fff;          text-align: center;          border-radius: 3px;          padding: 10px 0;          position: absolute;          z-index: 1;       }       #mytooltip:hover #mytext {          visibility: visible;       }               Hover the mouse over me          My Tooltip text          

A tooltip is visible when a user moves the mouse cursor on a text. You can add information in it to make it easy for users to understand.ExampleYou can try to run the following code to learn how to create tooltip −Live Demo           #mytooltip #mytext {          visibility: hidden;          width: 100px;          background-color: black;          color: #fff;          text-align: center;          border-radius: 3px;          padding: 10px 0;          position: absolute;          z-index: 1;       }       #mytooltip:hover #mytext {          visibility: visible;       }               Hover the mouse over me          My Tooltip text          

Use the animation-timing-function to set the speed curve of the Animation. You can try to run the following code to achieve thisExampleLive 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