Article Categories

Selected Reading

How to set the CSS property that the transition effect is for with JavaScript?

Javascript Object Oriented Programming Front End Technology

Use the transitionProperty property in JavaScript to set which CSS properties should have transition effects. This property controls exactly which CSS properties will animate when they change.

Syntax

element.style.transitionProperty = "property1, property2, ...";
element.style.transitionProperty = "all";  // All properties
element.style.transitionProperty = "none"; // No transitions

Example

Here's a complete example showing how to set transition properties dynamically:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #div1 {
            position: relative;
            margin: 10px;
            height: 300px;
            width: 400px;
            padding: 20px;
            border: 2px solid blue;
         }
         #div2 {
            padding: 80px;
            position: absolute;
            border: 2px solid blue;
            background-color: yellow;
            transform: rotateY(45deg);
            transition: all 3s;
         }
         #div2:hover {
            background-color: orange;
            width: 50px;
            height: 50px;
            padding: 100px;
            border-radius: 50px;
         }
      </style>
   </head>
   <body>
      <p>Hover over DIV2 to see transitions</p>
      <button onclick="setSpecificProperties()">Set Width/Height Only</button>
      <button onclick="setAllProperties()">Set All Properties</button>
      <div id="div1">DIV1
         <div id="div2">DIV2</div>
      </div>
      <script>
         function setSpecificProperties() {
            document.getElementById("div2").style.transitionProperty = "width, height";
            console.log("Transition set to: width, height only");
         }
         
         function setAllProperties() {
            document.getElementById("div2").style.transitionProperty = "all";
            console.log("Transition set to: all properties");
         }
      </script>
   </body>
</html>

Common Values

Value	Description	Example
`"all"`	All properties transition	`transitionProperty = "all"`
`"none"`	No transitions	`transitionProperty = "none"`
Specific properties	Only listed properties transition	`transitionProperty = "width, opacity"`

Multiple Properties Example

<script>
// Set multiple specific properties
const element = document.getElementById("myDiv");
element.style.transitionProperty = "background-color, transform, opacity";
element.style.transitionDuration = "2s";

console.log("Transition properties set:", element.style.transitionProperty);
</script>

Key Points

Use comma-separated values for multiple properties
Property names should match CSS property names
Setting specific properties can improve performance over "all"
Must be combined with transitionDuration to see effects

Conclusion

The transitionProperty gives you precise control over which CSS properties animate during transitions. Use specific property names for better performance, or "all" for convenience.

Nitya Raut

Updated on: 2026-03-15T23:18:59+05:30

202 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next