Is it possible to apply CSS transitions inline?

Question

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 1

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.

Answer 2

Combining with inline javascript you can achieve that, try this one:

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

<div id="target" style="transition: all 4s linear;" onclick="this.style.opacity = '.3'">click me</div>