动效配置

重要

趣浪吧内容元素动效绝大部分参考于animate，您可直接复制使用动效名称，即可实现对内容元素的动画控制。
如果您还不熟悉CSS3能力，可以查看MDN官方文档CSS3-Animation属性使用

JSON内容案例

{
    "componentList": [{
        "type": "img",
        "opts": {
            "styles": {
                "position": "absolute"
            },
            "imgList": [{
                "delay": 0,
                "keepTS": 6000,
                "styles": {
                    "width": "40%",
                    "height": "40%",
                    "left": "30%",
                    "top": "30%",
                    "animation": "1s fadeInLeft 1, 5s linear 1s flip infinite, 1s 6s fadeOutRight 1"
                },
                "url": "https://p6-bot-sign.byteimg.com/tos-cn-i-v4nquku3lp/7a7e01cf02854cdeb219b90e5509a458.png~tplv-v4nquku3lp-image.image?rk3s=68e6b6b5&x-expires=1752631988&x-signature=2frsSVkbGOK98FgsroxbzFt%2FE3Q%3D"
            }]
        }
    }]
}

趣浪吧官方动效

重要

虽然animate已经提供了数十种动效能力，但依旧难以满足个性化视频能力，因此趣浪吧提供了更多内置动效。

如果您有更多动效需求，欢迎联系我们迭代更新。

@keyframes bgImgScaleInOut {
    0% {
        width: 100%;
        height: 100%;
    }

    50% {
        width: 110%;
        height: 110%;
    }

    100% {
        width: 100%;
        height: 100%;
    }
}

@keyframes scaleInOut {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes zIndexInOut {
    0% {
        z-index: 1;
    }

    50% {
        z-index: 999;
    }

    100% {
        z-index: 1;
    }
}

@keyframes hide {
    0% {
        display: none;
    }

    100% {
        display: none;
    }
}