Front End Technology Articles - Page 635 of 860

To set the name of the CSS property the transition effect is, use the CSS transition-property.In the below example, we have set the property as width and set the duration as well:ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition-property: width;             transition-duration: 3s;          }          div:hover {             width: 250px;          }                     Heading One       Hover over the below box to change its width.          

Use the transition-duration property in CSS to set how many seconds or milliseconds a CSS transition effect takes to complete −ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition-property: height;             transition-duration: 2s;          }          div:hover {             height: 200px;          }                     Heading One       Hover over the below box to change its height.          

Use the transition-duration property to set the duration of transitionExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition-property: height;             transition-duration: 2s;          }          div:hover {             height: 200px;          }                     Heading One       Hover over the below box to change its height.          

Use the transition-delay property to set a delay for 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: 2s;          }          div:hover {             width: 350px;          }                     Heading One       Hover over the below box to change its width. It begins with a delay of 2 seconds.          

Use the CSS transition property to set all the four transition properties into a single line. You can try to run the following code to work with the transition property −ExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition: height 3s;          }          div:hover {             height: 250px;          }                     Heading One       Hover over the below box to change its height.          

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 transitionExampleLive 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 animation-duration property to set how long an animation should take to complete one cycleExampleYou can try to run the following code to implement the animation-duration property −Live Demo                    div {             width: 150px;             height: 200px;             position: relative;             background: red;             animation-name: myanim;             animation-duration: 2s;          }          @keyframes myanim {            from {left: 0px; background-color: green;}             to {left: 200px; background-color: blue;}          }                              

To add transition effect for width and height property of an element, you can try to run the following codeExampleLive Demo                    div {             width: 150px;             height: 150px;             background: blue;             transition: width 3s;          }          div:hover {             width: 250px;             height: 250px;          }                     Heading One       Hover over the below box to change its width and height.          

To create an image gallery with CSS is quite easy. You can try to run the following code to achieve this. A gallery of 3 images is created here,ExampleLive Demo                    div.myGallery {             margin: 3px;             border: 2px solid orange;             float: left;             width: 220px;          }          div.myGallery:hover {             border: 1px solid blue;          }          div.myGallery img {             width: 100%;             height: auto;          }          div.desc {             padding: 20px;             text-align: center;          }                                                              3D Animation Tutorial                                                      Swift Video Tutorial                                                      CSS Tutorial          

To create a transition effect, set the property for the transition effect. With that also set the duration of effect.transition: height 5s;You can try to run the following code to create a transition effectExampleLive demo                    div {             width: 150px;             height: 150px;             background: blue;             transition: width 3s;          }          div:hover {             width: 250px;          }                     Heading One       Hover over the below box to change its width.