Смена изображений по таймеру с использованием CSS анимации без Javascript

CSS3

CSS3

Продолжаем изучать CSS и сегодня попробуем реализовать очень интересную вещь — будем по таймеру менять 2 картинки. Сделать такое на CSS до недавнего времени было просто невозможно. Итак, поехали.

 

 

 

Наш пример по верстке и коду CSS будет мало чем отличаться от статьи о изменении прозрачности при наведении. Верстка остается прежняя.

<div id="img_container">
<img class="bottom" src="html5.jpg" />
<img class="top" src="css3.jpg" />
</div>

И CSS стили мы не трогаем. Единственное — удаляем блок с hover. В итоге в CSS должны быть описаны следующие стили

#img_container {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}

#img_container img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

А вот теперь самое время заняться наше анимацией. Я не буду подробно расписывать как все это работает, если интересно — пишите в комментариях. Просто приведу конечный CSS код

#img_container {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}

#img_container img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

@-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@-moz-keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@-o-keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#img_container img.top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;

-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 5s;
-moz-animation-direction: alternate;

-o-animation-name: cf3FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 5s;
-o-animation-direction: alternate;
<p style="text-align: center;">animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}

В итоге мы получим 2 картинки, которые меняются в цикле с эффектом fade каждые 5 секунд. Как изменить этот код по себя думаю понятно. Ну а посмотреть его в работе можно, нажав кнопку ДЕМО.

И еще — для одного из моих проектов потребовалось куча контента. Хорошего контента, seo-оптимизированного. Такой был найден - seo копирайт.

demo

 

Меток нет. Похожие записи
Запись опубликована в рубрике CSS и все, что связано со стилями. Добавьте в закладки постоянную ссылку.

2 комментария: Смена изображений по таймеру с использованием CSS анимации без Javascript

  1. Юлия говорит:

    Добрый день!

    Очень помогла Ваша статья, большое спасибо!
    Только один вопрос — есть ли возможность изменить этот код по 3-4 изображения, или он работает только для двух?

    Заранее спасибо.

  2. Борис говорит:

    Прикольно,обязательно попробую применить на своем

    сайте

    . До этого использовал javascript. Спасибо автору

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>