- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1566 Articles for CSS
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
74 Views
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; } }
![mkotla](https://www.tutorialspoint.com/assets/profiles/13540/profile/60_41073-1512640012.jpg)
308 Views
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
![Nancy Den](https://www.tutorialspoint.com/assets/profiles/13557/profile/60_88439-1512714529.jpg)
2K+ Views
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
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
91 Views
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
![seetha](https://www.tutorialspoint.com/assets/profiles/13549/profile/60_42938-1512640859.jpg)
67 Views
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.
![Daniol Thomas](https://www.tutorialspoint.com/assets/profiles/13551/profile/60_130035-1512726078.jpg)
205 Views
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.
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
95 Views
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.
![mkotla](https://www.tutorialspoint.com/assets/profiles/13540/profile/60_41073-1512640012.jpg)
178 Views
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.
![Krantik Chavan](https://www.tutorialspoint.com/assets/profiles/13545/profile/60_126883-1512724834.jpg)
215 Views
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.
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
63 Views
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.