Giters

master-co / css

The CSS Language and Framework

Home Page:https://css.master.co

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

💖 Prefer animation names over variables

1aron opened this issue · comments

commented

Current

export default {
    variables: {
        float: '#000000'
    },
    animations: {
        float: {
            '0%': { transform: 'none' },
            '50%': { transform: 'translateY(-1.25rem)' },
            to: { transform: 'none' }
        },
    }
}
<div class="@float|.5s">

Generated CSS:

...
.\@float\|\.5s {
    animation: #000000 .5s;
}

Expected

export default {
    variables: {
        float: '#000000'
    },
    animations: {
        float: {
            '0%': { transform: 'none' },
            '50%': { transform: 'translateY(-1.25rem)' },
            to: { transform: 'none' }
        },
    }
}
<div class="@float|.5s">

Generated CSS:

...
.\@float\|\.5s {
    animation: float .5s;
}

Related properties: animation and animation-name