SCSS预编译动画

最新推荐文章于 2024-04-14 09:37:03 发布

WE丕样

最新推荐文章于 2024-04-14 09:37:03 发布

阅读量330

点赞数

分类专栏： scss 文章标签：动画 scss css3

本文链接：https://blog.csdn.net/Wq_2977/article/details/124863466

版权

scss 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

// 设置动画
// 动画兼容			
@mixin setKeyframes($names) {
    @-moz-keyframes #{$names} {
      @content
    }
    @-ms-keyframes #{$names} {
    	@content
    }
    @-webkit-keyframes #{$names} {
    	@content
    }
    @keyframes #{$names} {
    	@content
    }
};
//设置动画参数		动画名、时长、循环次数、变化曲线、延时
@mixin setAnimation($argu...){
    -webkit-animation: $argu;
    -moz-animation: $argu;
	-o-animation: $argu;
	animation: $argu;
}
// 设置单个属性动画
@mixin setAttr($name,$attr,$start,$end){
  @include setKeyframes($name){
    from{
  		#{$attr}: $start;
  	}
  	to{
  	  #{$attr}: $end;
  	}
  }
}
// 设置多个动画属性
@mixin setAttrs($name,$attrVal){
  @include setKeyframes($name){
    @each $item,$value in $attrVal{
      #{$item} {
        @each $key,$val in $value {
          #{$key}:$val;
        }
      }
    }
  }
}

应用 - 设置单个属性动画示例

.setBottom{
  @include setAttr(bottom1,bottom,0,30px);
  @include setAnimation(bottom1,1s,infinite,linear,0);
}
// 编译结果
.setBottom {
  -webkit-animation: bottom1, 1s, infinite, linear, 0;
  -moz-animation: bottom1, 1s, infinite, linear, 0;
  -o-animation: bottom1, 1s, infinite, linear, 0;
  animation: bottom1, 1s, infinite, linear, 0;
}
@-moz-keyframes bottom1 {
  from {
    bottom: 0;
  }
  to {
    bottom: 30px;
  }
}
@-ms-keyframes bottom1 {
  from {
    bottom: 0;
  }
  to {
    bottom: 30px;
  }
}
@-webkit-keyframes bottom1 {
  from {
    bottom: 0;
  }
  to {
    bottom: 30px;
  }
}
@keyframes bottom1 {
  from {
    bottom: 0;
  }
  to {
    bottom: 30px;
  }
}

应用 - 设置多个属性的动画示例

.setFont-size{
  $start:(opacity:0,font-size:0);
  $end:(opacity:1,font-size:0.23rem);
  $setAttrVal:(from:$start,to:$end);
  @include setAttrs(fs1,$setAttrVal);
  @include setAnimation(fs1 1s infinite linear 0 forwards);
}
// 编译结果
.setFont-size {
  -webkit-animation: fs1 1s infinite linear 0 forwards;
  -moz-animation: fs1 1s infinite linear 0 forwards;
  -o-animation: fs1 1s infinite linear 0 forwards;
  animation: fs1 1s infinite linear 0 forwards;
}
@-moz-keyframes fs1 {
  from {
    opacity: 0;
    font-size: 0;
  }
  to {
    opacity: 1;
    font-size: 0.23rem;
  }
}
@-ms-keyframes fs1 {
  from {
    opacity: 0;
    font-size: 0;
  }
  to {
    opacity: 1;
    font-size: 0.23rem;
  }
}
@-webkit-keyframes fs1 {
  from {
    opacity: 0;
    font-size: 0;
  }
  to {
    opacity: 1;
    font-size: 0.23rem;
  }
}
@keyframes fs1 {
  from {
    opacity: 0;
    font-size: 0;
  }
  to {
    opacity: 1;
    font-size: 0.23rem;
  }
}