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

2 votes187 views2 answers
Ng-multiselect-dropdown custom css
CSS
12 votes191 views2 answers
Other children than first css
CSS
0 vote181 views2 answers
Transparent input box
CSS
0 vote188 views1 answer
Material icons after css
CSS
0 vote197 views1 answer
Ion-img border radius
CSS
5 votes178 views1 answer
How to hange the color of your cursor in css
CSS
0 vote195 views1 answer
Npm ERR! 404 Not Found - GET https://registry.npmjs.org/taiwindcss - Not found
CSS
6 votes191 views5 answers
Flutter print
CSS
0 vote168 views1 answer
Div overlfow scroll
CSS
5 votes195 views3 answers
CSS RESPONSIVE
CSS