Анимация background'ов


#1


Всем привет.

Прошу помочь разобраться, прохожу курс и паралельно пытаюсь “слепить что-то своё”, и вот в том своём есть задача создать небольшое слайд-шоу, а что мне на данной стадии знаний может помочь, конечно же @keyframes и свойства animation.
Написал я вот такой код (см. ниже) и тут мой проц просто в полку унёсся, я конечно же понимаю что слайд-шоу постоянно подгружает по кругу картинки, но картинки не такие уже и большие. Вобщем, пробовал картинки конвертировать в jpg и svg и ничего. Что может помочь в данном случае ??
Спасибо.

@keyframes logoNET {
    0%{
        background: url(../img/Net/adsl.png) no-repeat;
    }
    25%{
        background: url(../img/Net/cat5e.png) no-repeat;
    }
    50%{
        background: url(../img/Net/objim.png) no-repeat;
    }
    75%{
        background: url(../img/Net/rj45.png) no-repeat;
    }
    100%{
        background: url(../img/Net/router.png) no-repeat;
    }
}
------
.logoNET{
    width: 350px;
    height: 350px;
    animation-name: logoNET;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    float: right;
    margin-top: 85px;
}