CSS transition-behavior和@starting-style实现淡入淡出效果实例页面

回到相关文章 »

效果：

仅allow-discrete

使用@starting-style

代码：

CSS代码：

img {
    transition: .25s allow-discrete;
    opacity: 1;
}
img ~ img {
    @starting-style {
      opacity: 0;
    }
}
img[hidden] {
    opacity: 0;
}

HTML代码：

<h4>仅allow-discrete</h4>
<button id="trigger">图片显示与隐藏</button>
<img id="target" src="1.jpg" />

<h4>使用@starting-style</h4>
<button id="trigger2">图片显示与隐藏</button>
<img id="target2" src="1.jpg"  />