tdesign-react/esm/common/style/web/utilities/_animation.less

TDesign Component for React

@import "../_variables.less";

@keyframes t-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes t-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes t-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.@{prefix}-icon-loading {
  animation: t-spin 1s linear infinite;
}

// 定义一个从A到B到动画
.anim-g-attr-change(@name, @attr, @from, @to, ) {

  @{keyf} {
    .anim-g-attr-change-from(e(@attr), e(@from));
  }

  to {
    .anim-g-attr-change-to(e(@attr), e(@to));
  }
  // 以下代码主要为了添加闭合标签
  @{anim} {
  }
  @keyf: ~"@keyframes @{name}  { from";
  @anim: ~" }  ";
}

.anim-g-attr-change-from (@name, @value) {
  @{name}: @value;
}
.anim-g-attr-change-to (@name, @value) {
  @{name}: @value;
}

@keyframes t-zoom-out {
  from {
    transform: scale(.2);
  }

  to {
    transform: scale(1);
  }
}