Scss transition mixin

Sass mixin

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

Source: sass-lang.com

Mixin for transition css

/* Mixin for transition css */
@mixin transition($for: all, $time-in: 250ms, $type: ease-in-out, $time-out: 0s) {
    transition: $for $time-in $type $time-out;
    -moz-transition: $for $time-in $type $time-out;
    -webkit-transition: $for $time-in $type $time-out;
    -o-transition: $for $time-in $type $time-out;
}

/* IE10 (the first stable version of IE to support transition)
does not require the -ms- prefix. */

Scss transition

div {
  transition: all 0.5s ease;
  background: red;
  padding: 10px;
}
div:hover {
  background: green;
  padding: 20px;
}

Source: css-tricks.com

Scss transition mixin

transition

-2

Similar codes

-1 vote144 views1 answer
Html css circle progress bar
CSS
1 vote149 views2 answers
How to add google fonts to css in react
CSS
59 votes142 views6 answers
Remove underline from link css
CSS
85 votes132 views5 answers
Justify content css
CSS
0 vote152 views1 answer
How to draw rhombus in css
CSS
32 votes143 views6 answers
Css font face
CSS
21 votes162 views5 answers
CSS italic
CSS
30 votes134 views4 answers
Opacity color
CSS
0 vote135 views1 answer
Radius to imported icons
CSS
0 vote128 views1 answer
Css flex bottom
CSS