Question

我在css中使用动画。

我正在尝试使用动画将div移到页面顶部。

以下示例代码适用于Google Chrome和Android。

它在iOS11上不起作用。

<html>
    <head>
        <title>animate</title>
        <style type='text/css'>
            .content-wrapper {
                width:100%;
                height: 100%;
                overflow: auto;
            }

            .card-wrapper {
                height: 30rem;
                width: 100%;
            }
            @keyframes moveToTop {
                0% { position: absolute; top: 30rem; }
                100% { position: absolute; top: 0rem; }
            }
            @-webkit-keyframes moveToTop {
                0% { position: absolute; top: 30rem; }
                100% { position: absolute; top: 0rem; }
            }

            .ntc { 
                animation: moveToTop 3s;
                -webkit-animation: moveToTop 3s;
            }

        </style>
    </head>
    <body style="font-size: 16px">
        <div class='content-wrapper'>
            <div class='card-wrapper nrc' style='background-color: red'>
                <div class='card'>
                    A
                </div>
            </div>

            <div class='card-wrapper ntc' style='background-color: black'>
                <div class='card'>
                    B
                </div>
            </div>
        </div>
    </body>
</html>

此解决方案对我不起作用：

keyframe animation does not work on safari for iOS

我试过了：

 -webkit-animation-name: movToTop; 
 -webkit-animation-duration: 1s;

而不是

-webkit-animation: moveToTop 3s;

那不起作用。

当我将position:absolute;移出关键帧时，它可以正常工作。但是我必须将position:absolute;放在关键帧块中。

CSS样式“位置”在IOS的关键帧中不起作用

0 个答案: