AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

CSS-анимация



Исходный код этого примера:

<style>
    .sky {
        position: relative;
        width: 700px;
        height: 300px;
        background-color: #deebec;
        overflow: hidden;
    }
    .cloud {
        background: url(../cloud.png);
        width: 698px;
        height: 323px;
        position: absolute;
        right: -100%;
        top: 0;
        animation: cloud 15s linear infinite;
    }
    @-webkit-keyframes cloud {
        from { right: -100%; top: -50%; }
        to { right: 100%; top: 0; }
    }
    @-moz-keyframes cloud {
        from { right: -100%; top: -50%; }
        to { right: 100%; top: 0; }
    }
    @-o-keyframes cloud {
        from { right: -100%; top: -50%; }
        to { right: 100%; top: 0; }
    }
    @keyframes cloud {
        from { right: -100%; top: -50%; }
        to { right: 100%; top: 0; }
    }
</style>
<div class="sky">
    <div class="cloud"></div>
</div>


.

© Copyright 2008-2019 by KDG



Rambler's Top100