Question

我对动画和编码的世界都是全新的，在互联网上搜索我能找到接近我想要的东西但是现在代码只能动画图像从左边滑入而不是滑动等待10秒钟后退出屏幕。

<html>
    <head>
        <style>
            .wrapper {
                position: relative;
                overflow: hidden;
                width: 500px;
                height: 500px;
            }

            #slide {
                position: absolute;
                left: -130px;
                width: 130px;
                height: 330px;
                -webkit-animation: slide 10s 0s 1;
                -webkit-animation: slide 0.5s forwards;
                -webkit-animation-delay: 2s;
                animation: slide 2s forwards;
                transition: 4s;
            }

            @-webkit-keyframes slide {
                100% { left: 0; }
            }

            @keyframes slide {
                100% { left: 0; }
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <img id="slide" src="http://i.imgur.com/uqMkMLV.png" />
        </div>

    </body>
</html>

如何解决此问题，使图像在屏幕上停留10秒后从屏幕上滑回？

Answer 1

@keyframes slide {
    from {
        // declare animation
    }

    to {
        // declare animation
    }
}

此代码可以达到您想要的效果。

@keyframes slide {
    0% {
        left: -330px
    }

    10% {
        left: 0px
    }

    90% {
        left: 0px
    }

    100% {
        left: -330px
    }
}

尝试调整动画持续时间。干杯！

如何使用CSS3 / webkit动画为图像设置动画以从屏幕左侧滑入，等待几秒钟，然后从屏幕上滑回？

1 个答案: