- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set the name of the CSS property the transition effect is for
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:
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: blue;
transition-property: width;
transition-duration: 3s;
}
div:hover {
width: 250px;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Hover over the below box to change its width.</p>
<div></div>
</body>
</html>
Published on 16-May-2018 12:49:36
- Related Questions & Answers
- How to set the CSS property that the transition effect is for with JavaScript?
- Set a delay for the CSS transition effect
- Add CSS transition effect for both the width and height property
- How to set the speed curve of the transition effect with CSS
- How to delay the Transition Effect with CSS
- How to set the speed curve of the transition effect with JavaScript?
- Set the speed of the hover effect with CSS
- CSS Transition property
- Set the name of the CSS @keyframes animation
- How to set when the transition effect will start with JavaScript?
- CSS transition-duration property
- Usage of CSS transition-delay property
- CSS transition-timing-function property
- Usage of CSS transition-timing-function property
- How to create a transition effect with CSS?
Advertisements