What are the triggering methods using css transition?

The triggering methods are: 1. Triggered through the pseudo-class element ":hover", the syntax is "element {transition: attribute transition time} element:hover {attribute: attribute value}"; 2. Through "element.classList The .add("element name")" statement triggers the css transition effect.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The first type: Triggered through pseudo-class elements

	<style>
		.box{
      		width: 100px;
      		height: 100px;
      		background-color: blueviolet;
      		transition: width 1s linear .5s;
    	}
    	.box:hover{
      		width: 400px;
    	}
	</style>
	<p class="box">
    </p>

The second type: Triggered through JS

There must be a certain delay when added through js (delay removal has no effect) Change the style of elements

<style>
	.box{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      transition: width 1s linear .5s;
    }
    .box1{
      width: 400px;
    }</style>
<p class="box">    
</p>

<scrpit>
	setTimeout(() => {
      let element = document.getElementsByClassName(&#39;box&#39;)[0];
      element.classList.add(&#39;box1&#39;)
    }, 1) </scrpit>

Recommended learning:css video tutorial

The above is the detailed content of What are the triggering methods using css transition?. For more information, please follow other related articles on the PHP Chinese website!