@property与变量种子动画计数器效果实例页面

CSS代码：

@property --seed {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

@keyframes seed {
  from { --seed: 0; }
  to { --seed: 100; }
}

.element {
  animation: seed .5s both;
  opacity: calc(var(--seed) / 100);
}

.spin {
  animation: seed 1s linear infinite;
  transform: rotate(calc(var(--seed) * 3.6deg));
}

abbr {
    display: inline-block;
    border: solid deepskyblue;
    border-top-color: #0000;
    border-radius: 50%;
    width: 20px; height: 20px;
}

HTML代码：

<h4 class="fill">点击图片淡出效果</h4>
<img class="element" src="1.jpg" onClick="this.classList.remove('element');this.offsetWidth;this.classList.add('element');">

<h4 class="fill">loading旋转</h4>
<abbr class="spin"></abbr>