LwuCSS

Appearance

On this page

过渡和动画 ​

动画 ​

使元素产生动画的CSS动画功能类。

使用前缀 ​

为了防止和开发者项目中的其他原子化样式语法冲突，样式库默认添加了前缀 lwu，使用示例如下：

vue
<view class="lwu-flex"></view>

语法 ​

ClassProperties平台兼容性说明
animate-noneanimate: noneH5、小程序、app-vue
animate-spinanimation: spin 1s linear infiniteH5、小程序、app-vue
animate-pinganimation: ping 1s cubic-bezier(0, 0, 0.2, 1) infiniteH5、小程序、app-vue
animate-pulseanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infiniteH5、小程序、app-vue
animate-bounceanimation: bounce 1s infiniteH5、小程序、app-vue
animate-flickeranimation: flicker 1s infiniteH5、小程序、app-vue
animate-heartbeatanimation: heartbeat 1s infiniteH5、小程序、app-vue
animate-shakeanimation: shake 0.6sH5、小程序、app-vue

动画时间曲线 ​

ClassProperties平台兼容性说明
animate-tf-linearanimation-timing-function: linearH5、小程序、app-vue
animate-tf-easeanimation-timing-function: easeH5、小程序、app-vue
animate-tf-ease-inanimation-timing-function: ease-inH5、小程序、app-vue
animate-tf-ease-outanimation-timing-function: ease-outH5、小程序、app-vue
animate-tf-ease-in-outanimation-timing-function: ease-in-outH5、小程序、app-vue

循环动画 ​

ClassProperties平台兼容性说明
animate-ic-loopanimation-iteration-count: infiniteH5、小程序、app-vue

@keyframes spin ​

css
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ping ​

css
@keyframes ping {

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes pulse ​

css
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }
}

@keyframes bounce ​

css
@keyframes bounce {

    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

@keyframes flicker ​

css
@keyframes flicker {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes heartbeat ​

css
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes shake ​

css
@keyframes shake {
    0%,
    90%,
    100% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(-8px);
    }
    20% {
        transform: translateX(7px);
    }
    30% {
        transform: translateX(-6px);
    }
    40% {
        transform: translateX(5px);
    }
    50% {
        transform: translateX(-4px);
    }
    60% {
        transform: translateX(3px);
    }
    70% {
        transform: translateX(-2px);
    }
    80% {
        transform: translateX(1px);
    }
}