是否可以仅使用顺风使元素从底部进入视口？

Question

我正在实施 cookie 同意弹出窗口。我希望它显示在页面底部。

是否可以只使用 tailwind？

我无法使用 animation-bounce，因为用户体验很差，因为用户需要能够单击确定按钮。

我也知道您可以在 hover: 或其他伪类上使用很多动画和过渡。

但就我而言，我希望它仅从底部出现，无需用户交互。

我可以这样做吗？

Answer 1

可以，您需要使用关键帧来创建自定义动画。这是我为一条从左到右移动的线编写的代码：

// Inside theme.extend in tailwind.config.js
        keyframes: {
            'moving-line': {
                from: {
                    width: '0px',
                    opacity: '0',
                },
                to: {
                    width: '30%',
                    opacity: '0.6',
                },
            },
        },
        animation: {
            'moving-line': 'moving-line .8s ease .5s forwards',
        },
    },
},

然后您可以在元素的类名中将其用作 animate-moving-line。要使其从底部出现，请使用 translate-y 属性并像上面那样创建您自己的动画。

是否可以仅使用顺风使元素从底部进入视口？

Is it possible to make an element enter into the viewport from bottom, using only tailwind?

tailwind-css