在 Sass 中使用 Keyframe
一:定义混合宏
SASS中使用Keyframe
首先定义一个混合宏,由Keyframes
、animationName
和content
组成,代码如下:
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
二:引用混合宏
使用@include
指令引用定义好的混合宏,创建动画并定义动画名称:
@include keyframes(move) {
0% {
margin-left: 100px;
}
100% {
margin-left: 400px;
}
}
三:使用动画
animation: move 7s linear;
-moz-animation: move 7s linear;
-webkit-animation: move 7s linear;
-o-animation: move 7s linear;
效果如下图:![](http://upload-images.jianshu.io/upload_images/4928722-a618998a68da7632.gif?imageMogr2/auto-orient/strip)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步