scss CSS过渡

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss CSS过渡相关的知识,希望对你有一定的参考价值。

.box {
    height: 10rem;
    width: 10rem;
    background: #4a9bb1;
    // muutuse kestus, soovitatav märkida millisekundites, kuna JS ühikuks vaikimisi on millisekund
    // transition-duration: 500ms;
    // mis muutub, saab kasutada väärtusi all, mis rakendab transitioni kõigile elementidele, või siis nimetada neid ükshaaval komaga eraldades
    // transition-property: background, transform;
    // muutuse ajamäär, vb linear, ease-in, ease-out ja ease-in-out
    // transition-timing-function: ease-in-out;
    // alguse viide, ehk kaua animatsiooni algusega viideteakse
    // transition-delay: none;
    // Kõik need saab kirjutada ka ühele reale
    transition: 500ms all ease-in-out;
    &:hover {
        background: #62a769;
        transform: rotate(45deg);
    }

以上是关于scss CSS过渡的主要内容,如果未能解决你的问题,请参考以下文章

text 使用此Transition SCSS Mixin将CSS过渡添加到元素。轻松设置颜色,宽度和填充等属性的动画,以创建淡入淡出效果

CSS背景色过渡在特定浏览器中不起作用(桌面+移动)

scss 指南针 - 过渡短hand.scss

scss 过渡

scss 随着过渡而扩展

scss 全页模式 - 假滚动过渡曲线