Fade mixin for SCSS



    SASS/SCSS Starter Kit

    The @mixin fade() creates a CSS effect that will gradually make a element disappear. The first parameter is the type of fade to apply, "hide" or "show". The second parameter is the transition time in seconds.

    Shortcut: scss.mixin.fade

    @mixin fade($type) {
      @if $type== "hide" {
        visibility: hidden;
        opacity: 0;
        transition: visibility 1s, opacity 1s;
      } @else if $type== "show" {
        visibility: visible;
        opacity: 1;
        transition: visibility 1s, opacity 1s;
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    • Security
    • Privacy Policy
    • Code Privacy
    • Terms of Service
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.