scss Sass - Mixins:动画和关键帧
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss Sass - Mixins:动画和关键帧相关的知识,希望对你有一定的参考价值。
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@-ms-keyframes $animation-name {
@content;
}
@-o-keyframes $animation-name {
@content;
}
@keyframes $animation-name {
@content;
}
}
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
/* Usage */
@include keyframes(slide-down) {
0% { opacity: 1; }
90% { opacity: 0; }
}
.element {
width: 100px;
height: 100px;
background: black;
@include animation('slide-down 5s 3');
}
以上是关于scss Sass - Mixins:动画和关键帧的主要内容,如果未能解决你的问题,请参考以下文章
scss Mixins Sass
scss CSS Flexbox - Sass Mixins
scss 用于媒体查询的Sass mixins
scss Mixins Sass
scss 因为只有sass mixins
scss CSS Flexbox - Sass Mixins