Is it possible to use CSS transitions inside a line?

Question

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

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

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

Run codeHide result

Answer 1

Transitions need a change in value to produce any effect. This is usually achieved, as you said, by switching the class or using a pseudo selector.

If you want your "transition" to occur without any changes, you need to use the 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>

Run codeHide result

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

Answer 2

javascript, , :

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

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

Hide result