Radex Radex - 15 days ago 9
CSS Question

Is it possible to apply CSS transitions inline?

Is it possible to apply CSS transitions inline (in the DOM), without using Pseudo Selector or using JS to add and change a property

class
on the dom?
.


#target{
width: 100px;
height:100px;
background-color:red;
}

<div id="target" style="transition: opacity 1s linear;"></div>




Answer

Transitions need a changing value to produce any effect. This is usually achieved, as you mentioned, by toggling a class or using a pseudo selector.

If you want your "transition" to happen without any changing values, you need to use an animation:

#target{
  width: 100px;
  height:100px;
  background-color:red;
}

@keyframes fadeMe {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<div id="target" style="animation: fadeMe 2s;"></div>

I'm not sure why you would need to do this inline though.