Анимация по ключевым кадрам на CSS3 без JavaScript - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Где сидел кузнечик в детской песни Н.Носова ?
Всего ответов: 1269
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Разные скрипты

Анимация по ключевым кадрам на CSS3 без JavaScript

Хочешь сказать спасибо? Кликни на рекламный баннер.

02.04.2015, 15:02
Анимация в CSS3 при помощи ключевых кадров CSS3 позволяет создавать крутые анимационные эффекты без использования JavaScript-фреймворков. CSS3 и HTML5 делают простым то, что раньше было сложным. В этой статье я расскажу, как максимально просто реализовать анимацию в CSS3. Используйте приведённые пример, чтобы визуально обогатить ваши интернет-проекты. Посмотрите приведенные ниже ДЕМО-версии в любом современном браузере: Google Chrome, Firefox или Safari.
Уверен, этот эффект Вам понравиться !!!

Для начала добавим CSS свойства:

Код
#zoom {width:512px; height:512px; overflow:hidden; position:relative; border:5px solid #123; margin:0 auto;}
/* for Firefox */
@-moz-keyframes zoom1 {
0% {-moz-transform: scale(1);}
3.5% {-moz-transform: scale(2);}
3.55% {-moz-transform: scale(1);}  
100% {-moz-transform: scale(1);}
}

@-moz-keyframes zoom2 {
0% {-moz-transform: scale(0.5);}  
3.5% {-moz-transform: scale(1);}
7% {-moz-transform: scale(2);}  
7.01% {-moz-transform: scale(0);}  
100% {-moz-transform: scale(0);}
}

@-moz-keyframes zoom2a {
0% {-moz-transform: scale(0.5);}  
3.5% {-moz-transform: scale(0.5);}  
7% {-moz-transform: scale(1);}  
10.5% {-moz-transform: scale(2);}
10.51% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show2a {
0% {opacity:0;}  
3.5% {opacity:0;}  
3.51% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom3 {
0% {-moz-transform: scale(0.5);}  
7% {-moz-transform: scale(0.5);}  
10.5% {-moz-transform: scale(1);}  
14% {-moz-transform: scale(2);}  
14.11% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show3 {
0% {opacity:0;}  
7% {opacity:0;}  
7.01% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom4 {
0% {-moz-transform: scale(0.5);}  
10.5% {-moz-transform: scale(0.5);}  
14% {-moz-transform: scale(1);}  
17.5% {-moz-transform: scale(2);}  
17.51% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show4 {
0% {opacity:0;}  
10.5% {opacity:0;}  
10.51% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom5 {
0% {-moz-transform: scale(0.5);}  
14% {-moz-transform: scale(0.5);}  
17.5% {-moz-transform: scale(1);}  
21% {-moz-transform: scale(2);}  
21.01% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show5 {
0% {opacity:0;}  
14% {opacity:0;}  
14.01% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom6 {
0% {-moz-transform: scale(0.5);}  
17.5% {-moz-transform: scale(0.5);}  
21% {-moz-transform: scale(1);}  
24.5% {-moz-transform: scale(2);}  
24.51% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show6 {
0% {opacity:0;}  
17.5% {opacity:0;}  
17.51% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom7 {
0% {-moz-transform: scale(0.5);}  
21% {-moz-transform: scale(0.5);}  
24.5% {-moz-transform: scale(1);}  
28% {-moz-transform: scale(2);}  
28.01% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show7 {
0% {opacity:0;}  
21% {opacity:0;}  
21.01% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom8 {
0% {-moz-transform: scale(0.5);}  
24.5% {-moz-transform: scale(0.5);}  
28% {-moz-transform: scale(1);}  
31.5% {-moz-transform: scale(2);}  
31.51% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show8 {
0% {opacity:0;}  
24.5% {opacity:0;}  
24.51% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom9 {
0% {-moz-transform: scale(0.5);}  
28% {-moz-transform: scale(0.5);}  
31.5% {-moz-transform: scale(1);}  
35% {-moz-transform: scale(2);}  
35.51% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show9 {
0% {opacity:0;}  
28% {opacity:0;}  
28.01% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom10 {
0% {-moz-transform: scale(0.5);}  
31.5% {-moz-transform: scale(0.5);}  
35% {-moz-transform: scale(1);}  
38.5% {-moz-transform: scale(2);}  
38.51% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show10 {
0% {opacity:0;}  
31.5% {opacity:0;}  
31.51% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom11 {
0% {-moz-transform: scale(0.5);}  
35% {-moz-transform: scale(0.5);}  
38.5% {-moz-transform: scale(1);}  
42% {-moz-transform: scale(2);}  
42.01% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show11 {
0% {opacity:0;}  
35% {opacity:0;}  
35.01% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom12 {
0% {-moz-transform: scale(0.5);}  
38.5% {-moz-transform: scale(0.5);}  
42% {-moz-transform: scale(1);}  
45.5% {-moz-transform: scale(2);}  
45.51% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show12 {
0% {opacity:0;}  
38.5% {opacity:0;}  
38.51% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom13 {
0% {-moz-transform: scale(0.5);}  
42% {-moz-transform: scale(0.5);}  
45.5% {-moz-transform: scale(1);}  
49% {-moz-transform: scale(2);}  
49.01% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show13 {
0% {opacity:0;}  
42% {opacity:0;}  
42.01% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom14 {
0% {-moz-transform: scale(0.5);}  
45.5% {-moz-transform: scale(0.5);}  
49% {-moz-transform: scale(1);}  
52.5% {-moz-transform: scale(2);}  
52.51% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show14 {
0% {opacity:0;}  
45.5% {opacity:0;}  
45.51% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom15 {
0% {-moz-transform: scale(0.5);}  
49% {-moz-transform: scale(0.5);}  
52.5% {-moz-transform: scale(1);}  
56% {-moz-transform: scale(2);}  
56.01% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show15 {
0% {opacity:0;}  
49% {opacity:0;}  
49.01% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom16 {
0% {-moz-transform: scale(0.5);}  
52.5% {-moz-transform: scale(0.5);}  
56% {-moz-transform: scale(1);}  
59.5% {-moz-transform: scale(2);}  
59.51% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show16 {
0% {opacity:0;}  
52.5% {opacity:0;}  
52.51% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom17 {
0% {-moz-transform: scale(0.5);}  
56% {-moz-transform: scale(0.5);}  
59.5% {-moz-transform: scale(1);}  
63% {-moz-transform: scale(2);}  
63.01% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show17 {
0% {opacity:0;}  
56% {opacity:0;}  
56.01% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom18 {
0% {-moz-transform: scale(0.5);}  
59.5% {-moz-transform: scale(0.5);}  
63% {-moz-transform: scale(1);}  
66.5% {-moz-transform: scale(2);}  
66.51% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show18 {
0% {opacity:0;}  
59.5% {opacity:0;}  
59.51% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom19 {
0% {-moz-transform: scale(0.5);}  
63% {-moz-transform: scale(0.5);}  
66.5% {-moz-transform: scale(1);}  
70% {-moz-transform: scale(2);}  
70.01% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show19 {
0% {opacity:0;}  
63% {opacity:0;}  
63.01% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom20 {
0% {-moz-transform: scale(0.5);}  
66.5% {-moz-transform: scale(0.5);}  
70% {-moz-transform: scale(1);}  
73.5% {-moz-transform: scale(2);}  
73.51% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show20 {
0% {opacity:0;}  
66.5% {opacity:0;}  
66.51% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom21 {
0% {-moz-transform: scale(0.5);}  
70% {-moz-transform: scale(0.5);}  
73.5% {-moz-transform: scale(1);}  
78% {-moz-transform: scale(2);}  
78.01% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show21 {
0% {opacity:0;}  
70% {opacity:0;}  
70.01% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom22 {
0% {-moz-transform: scale(0.5);}  
73.5% {-moz-transform: scale(0.5);}  
78% {-moz-transform: scale(1);}  
82.5% {-moz-transform: scale(2);}  
82.51% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show22 {
0% {opacity:0;}  
73.5% {opacity:0;}  
73.51% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom23 {
0% {-moz-transform: scale(0.5);}  
78% {-moz-transform: scale(0.5);}  
82.5% {-moz-transform: scale(1);}  
87% {-moz-transform: scale(2);}  
87.01% {-moz-transform: scale(0);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes show23 {
0% {opacity:0;}  
78% {opacity:0;}  
78.01% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom24 {
0% {-moz-transform: scale(0.5);}  
82.5% {-moz-transform: scale(0.5);}  
87% {-moz-transform: scale(1);}  
91.5% {-moz-transform: scale(2);}  
100% {-moz-transform: scale(2);}
}
@-moz-keyframes show24 {
0% {opacity:0;}  
82.5% {opacity:0;}  
82.51% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom25 {
0% {-moz-transform: scale(0.5);}  
87% {-moz-transform: scale(0.5);}  
91.5% {-moz-transform: scale(1);}  
95% {-moz-transform: scale(2);}  
100% {-moz-transform: scale(2);}
}
@-moz-keyframes show25 {
0% {opacity:0;}  
87% {opacity:0;}  
87.01% {opacity:1}  
100% {opacity:1;}
}

@-moz-keyframes zoom26 {
0% {-moz-transform: scale(0.25);}  
91.5% {-moz-transform: scale(0.25);}  
96% {-moz-transform: scale(0.5);}  
100% {-moz-transform: scale(1);}  
}
@-moz-keyframes show26 {
0% {opacity:0;}  
91.5% {opacity:0;}  
91.51% {opacity:1}  
100% {opacity:1;}
}

#zoom img {position:absolute; left:0; top: 0;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: cubic-bezier(0.7, 0.5, 0.5, 0.5);
-moz-animation-duration:20s;
-moz-transform: scale(0);
}
#zoom img.p1 {-moz-transform: scale(1);}

#zoom:hover img.p1 {-moz-animation-name: zoom1}
#zoom:hover img.p2 {-moz-animation-name: zoom2}
#zoom:hover img.p2a {-moz-animation-name: zoom2a, show2a}
#zoom:hover img.p3 {-moz-animation-name: zoom3, show3}
#zoom:hover img.p4 {-moz-animation-name: zoom4, show4}
#zoom:hover img.p5 {-moz-animation-name: zoom5, show5}
#zoom:hover img.p6 {-moz-animation-name: zoom6, show6}
#zoom:hover img.p7 {-moz-animation-name: zoom7, show7}
#zoom:hover img.p8 {-moz-animation-name: zoom8, show8}
#zoom:hover img.p9 {-moz-animation-name: zoom9, show9}
#zoom:hover img.p10 {-moz-animation-name: zoom10, show10}
#zoom:hover img.p11 {-moz-animation-name: zoom11, show11}
#zoom:hover img.p12 {-moz-animation-name: zoom12, show12}
#zoom:hover img.p13 {-moz-animation-name: zoom13, show13}
#zoom:hover img.p14 {-moz-animation-name: zoom14, show14}
#zoom:hover img.p15 {-moz-animation-name: zoom15, show15}
#zoom:hover img.p16 {-moz-animation-name: zoom16, show16}
#zoom:hover img.p17 {-moz-animation-name: zoom17, show17}
#zoom:hover img.p18 {-moz-animation-name: zoom18, show18}
#zoom:hover img.p19 {-moz-animation-name: zoom19, show19}
#zoom:hover img.p20 {-moz-animation-name: zoom20, show20}
#zoom:hover img.p21 {-moz-animation-name: zoom21, show21}
#zoom:hover img.p22 {-moz-animation-name: zoom22, show22}
#zoom:hover img.p23 {-moz-animation-name: zoom23, show23}
#zoom:hover img.p24 {-moz-animation-name: zoom24, show24}
#zoom:hover img.p25 {-moz-animation-name: zoom25, show25}
#zoom:hover img.p26 {-moz-animation-name: zoom26, show26}

/* for Safari and Chrome */
@-webkit-keyframes zoom1 {
0% {-webkit-transform: scale(1);}
3.5% {-webkit-transform: scale(2);}
3.55% {-webkit-transform: scale(1);}  
100% {-webkit-transform: scale(1);}
}

@-webkit-keyframes zoom2 {
0% {-webkit-transform: scale(0.5);}  
3.5% {-webkit-transform: scale(1);}
7% {-webkit-transform: scale(2);}  
7.01% {-webkit-transform: scale(0);}  
100% {-webkit-transform: scale(0);}
}

@-webkit-keyframes zoom2a {
0% {-webkit-transform: scale(0.5);}  
3.5% {-webkit-transform: scale(0.5);}  
7% {-webkit-transform: scale(1);}  
10.5% {-webkit-transform: scale(2);}
10.51% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show2a {
0% {opacity:0;}  
3.5% {opacity:0;}  
3.51% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom3 {
0% {-webkit-transform: scale(0.5);}  
7% {-webkit-transform: scale(0.5);}  
10.5% {-webkit-transform: scale(1);}  
14% {-webkit-transform: scale(2);}  
14.11% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show3 {
0% {opacity:0;}  
7% {opacity:0;}  
7.01% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom4 {
0% {-webkit-transform: scale(0.5);}  
10.5% {-webkit-transform: scale(0.5);}  
14% {-webkit-transform: scale(1);}  
17.5% {-webkit-transform: scale(2);}  
17.51% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show4 {
0% {opacity:0;}  
10.5% {opacity:0;}  
10.51% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom5 {
0% {-webkit-transform: scale(0.5);}  
14% {-webkit-transform: scale(0.5);}  
17.5% {-webkit-transform: scale(1);}  
21% {-webkit-transform: scale(2);}  
21.01% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show5 {
0% {opacity:0;}  
14% {opacity:0;}  
14.01% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom6 {
0% {-webkit-transform: scale(0.5);}  
17.5% {-webkit-transform: scale(0.5);}  
21% {-webkit-transform: scale(1);}  
24.5% {-webkit-transform: scale(2);}  
24.51% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show6 {
0% {opacity:0;}  
17.5% {opacity:0;}  
17.51% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom7 {
0% {-webkit-transform: scale(0.5);}  
21% {-webkit-transform: scale(0.5);}  
24.5% {-webkit-transform: scale(1);}  
28% {-webkit-transform: scale(2);}  
28.01% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show7 {
0% {opacity:0;}  
21% {opacity:0;}  
21.01% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom8 {
0% {-webkit-transform: scale(0.5);}  
24.5% {-webkit-transform: scale(0.5);}  
28% {-webkit-transform: scale(1);}  
31.5% {-webkit-transform: scale(2);}  
31.51% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show8 {
0% {opacity:0;}  
24.5% {opacity:0;}  
24.51% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom9 {
0% {-webkit-transform: scale(0.5);}  
28% {-webkit-transform: scale(0.5);}  
31.5% {-webkit-transform: scale(1);}  
35% {-webkit-transform: scale(2);}  
35.51% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show9 {
0% {opacity:0;}  
28% {opacity:0;}  
28.01% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom10 {
0% {-webkit-transform: scale(0.5);}  
31.5% {-webkit-transform: scale(0.5);}  
35% {-webkit-transform: scale(1);}  
38.5% {-webkit-transform: scale(2);}  
38.51% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show10 {
0% {opacity:0;}  
31.5% {opacity:0;}  
31.51% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom11 {
0% {-webkit-transform: scale(0.5);}  
35% {-webkit-transform: scale(0.5);}  
38.5% {-webkit-transform: scale(1);}  
42% {-webkit-transform: scale(2);}  
42.01% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show11 {
0% {opacity:0;}  
35% {opacity:0;}  
35.01% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom12 {
0% {-webkit-transform: scale(0.5);}  
38.5% {-webkit-transform: scale(0.5);}  
42% {-webkit-transform: scale(1);}  
45.5% {-webkit-transform: scale(2);}  
45.51% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show12 {
0% {opacity:0;}  
38.5% {opacity:0;}  
38.51% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom13 {
0% {-webkit-transform: scale(0.5);}  
42% {-webkit-transform: scale(0.5);}  
45.5% {-webkit-transform: scale(1);}  
49% {-webkit-transform: scale(2);}  
49.01% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show13 {
0% {opacity:0;}  
42% {opacity:0;}  
42.01% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom14 {
0% {-webkit-transform: scale(0.5);}  
45.5% {-webkit-transform: scale(0.5);}  
49% {-webkit-transform: scale(1);}  
52.5% {-webkit-transform: scale(2);}  
52.51% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show14 {
0% {opacity:0;}  
45.5% {opacity:0;}  
45.51% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom15 {
0% {-webkit-transform: scale(0.5);}  
49% {-webkit-transform: scale(0.5);}  
52.5% {-webkit-transform: scale(1);}  
56% {-webkit-transform: scale(2);}  
56.01% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show15 {
0% {opacity:0;}  
49% {opacity:0;}  
49.01% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom16 {
0% {-webkit-transform: scale(0.5);}  
52.5% {-webkit-transform: scale(0.5);}  
56% {-webkit-transform: scale(1);}  
59.5% {-webkit-transform: scale(2);}  
59.51% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show16 {
0% {opacity:0;}  
52.5% {opacity:0;}  
52.51% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom17 {
0% {-webkit-transform: scale(0.5);}  
56% {-webkit-transform: scale(0.5);}  
59.5% {-webkit-transform: scale(1);}  
63% {-webkit-transform: scale(2);}  
63.01% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show17 {
0% {opacity:0;}  
56% {opacity:0;}  
56.01% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom18 {
0% {-webkit-transform: scale(0.5);}  
59.5% {-webkit-transform: scale(0.5);}  
63% {-webkit-transform: scale(1);}  
66.5% {-webkit-transform: scale(2);}  
66.51% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show18 {
0% {opacity:0;}  
59.5% {opacity:0;}  
59.51% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom19 {
0% {-webkit-transform: scale(0.5);}  
63% {-webkit-transform: scale(0.5);}  
66.5% {-webkit-transform: scale(1);}  
70% {-webkit-transform: scale(2);}  
70.01% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show19 {
0% {opacity:0;}  
63% {opacity:0;}  
63.01% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom20 {
0% {-webkit-transform: scale(0.5);}  
66.5% {-webkit-transform: scale(0.5);}  
70% {-webkit-transform: scale(1);}  
73.5% {-webkit-transform: scale(2);}  
73.51% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show20 {
0% {opacity:0;}  
66.5% {opacity:0;}  
66.51% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom21 {
0% {-webkit-transform: scale(0.5);}  
70% {-webkit-transform: scale(0.5);}  
73.5% {-webkit-transform: scale(1);}  
78% {-webkit-transform: scale(2);}  
78.01% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show21 {
0% {opacity:0;}  
70% {opacity:0;}  
70.01% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom22 {
0% {-webkit-transform: scale(0.5);}  
73.5% {-webkit-transform: scale(0.5);}  
78% {-webkit-transform: scale(1);}  
82.5% {-webkit-transform: scale(2);}  
82.51% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show22 {
0% {opacity:0;}  
73.5% {opacity:0;}  
73.51% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom23 {
0% {-webkit-transform: scale(0.5);}  
78% {-webkit-transform: scale(0.5);}  
82.5% {-webkit-transform: scale(1);}  
87% {-webkit-transform: scale(2);}  
87.01% {-webkit-transform: scale(0);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes show23 {
0% {opacity:0;}  
78% {opacity:0;}  
78.01% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom24 {
0% {-webkit-transform: scale(0.5);}  
82.5% {-webkit-transform: scale(0.5);}  
87% {-webkit-transform: scale(1);}  
91.5% {-webkit-transform: scale(2);}  
100% {-webkit-transform: scale(2);}
}
@-webkit-keyframes show24 {
0% {opacity:0;}  
82.5% {opacity:0;}  
82.51% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom25 {
0% {-webkit-transform: scale(0.5);}  
87% {-webkit-transform: scale(0.5);}  
91.5% {-webkit-transform: scale(1);}  
95% {-webkit-transform: scale(2);}  
100% {-webkit-transform: scale(2);}
}
@-webkit-keyframes show25 {
0% {opacity:0;}  
87% {opacity:0;}  
87.01% {opacity:1}  
100% {opacity:1;}
}

@-webkit-keyframes zoom26 {
0% {-webkit-transform: scale(0.25);}  
91.5% {-webkit-transform: scale(0.25);}  
96% {-webkit-transform: scale(0.5);}  
100% {-webkit-transform: scale(1);}  
}
@-webkit-keyframes show26 {
0% {opacity:0;}  
91.5% {opacity:0;}  
91.51% {opacity:1}  
100% {opacity:1;}
}

#zoom img {position:absolute; left:0; top: 0;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(0.7, 0.5, 0.5, 0.5);
-webkit-animation-duration:20s;
-webkit-transform: scale(0);
}
#zoom img.p1 {-webkit-transform: scale(1);}

#zoom:hover img.p1 {-webkit-animation-name: zoom1}
#zoom:hover img.p2 {-webkit-animation-name: zoom2}
#zoom:hover img.p2a {-webkit-animation-name: zoom2a, show2a}
#zoom:hover img.p3 {-webkit-animation-name: zoom3, show3}
#zoom:hover img.p4 {-webkit-animation-name: zoom4, show4}
#zoom:hover img.p5 {-webkit-animation-name: zoom5, show5}
#zoom:hover img.p6 {-webkit-animation-name: zoom6, show6}
#zoom:hover img.p7 {-webkit-animation-name: zoom7, show7}
#zoom:hover img.p8 {-webkit-animation-name: zoom8, show8}
#zoom:hover img.p9 {-webkit-animation-name: zoom9, show9}
#zoom:hover img.p10 {-webkit-animation-name: zoom10, show10}
#zoom:hover img.p11 {-webkit-animation-name: zoom11, show11}
#zoom:hover img.p12 {-webkit-animation-name: zoom12, show12}
#zoom:hover img.p13 {-webkit-animation-name: zoom13, show13}
#zoom:hover img.p14 {-webkit-animation-name: zoom14, show14}
#zoom:hover img.p15 {-webkit-animation-name: zoom15, show15}
#zoom:hover img.p16 {-webkit-animation-name: zoom16, show16}
#zoom:hover img.p17 {-webkit-animation-name: zoom17, show17}
#zoom:hover img.p18 {-webkit-animation-name: zoom18, show18}
#zoom:hover img.p19 {-webkit-animation-name: zoom19, show19}
#zoom:hover img.p20 {-webkit-animation-name: zoom20, show20}
#zoom:hover img.p21 {-webkit-animation-name: zoom21, show21}
#zoom:hover img.p22 {-webkit-animation-name: zoom22, show22}
#zoom:hover img.p23 {-webkit-animation-name: zoom23, show23}
#zoom:hover img.p24 {-webkit-animation-name: zoom24, show24}
#zoom:hover img.p25 {-webkit-animation-name: zoom25, show25}
#zoom:hover img.p26 {-webkit-animation-name: zoom26, show26}


Этот HTML добавим на страницу сайта:

Код
<div id="zoom">
<img class="p1" src="http://megascripts.ru/demo/animation_css3/images/1.jpg" />
<img class="p2" src="http://megascripts.ru/demo/animation_css3/images/2.jpg" />
<img class="p2a" src="http://megascripts.ru/demo/animation_css3/images/2a.jpg" />
<img class="p3" src="http://megascripts.ru/demo/animation_css3/images/3.jpg" />
<img class="p4" src="http://megascripts.ru/demo/animation_css3/images/4.jpg" />
<img class="p5" src="http://megascripts.ru/demo/animation_css3/images/5.jpg" />
<img class="p6" src="http://megascripts.ru/demo/animation_css3/images/6.jpg" />
<img class="p7" src="http://megascripts.ru/demo/animation_css3/images/7.jpg" />
<img class="p8" src="http://megascripts.ru/demo/animation_css3/images/8.jpg" />
<img class="p9" src="http://megascripts.ru/demo/animation_css3/images/9.jpg" />
<img class="p10" src="http://megascripts.ru/demo/animation_css3/images/10.jpg" />
<img class="p11" src="http://megascripts.ru/demo/animation_css3/images/11.jpg" />
<img class="p12" src="http://megascripts.ru/demo/animation_css3/images/12.jpg" />
<img class="p13" src="http://megascripts.ru/demo/animation_css3/images/13.jpg" />
<img class="p14" src="http://megascripts.ru/demo/animation_css3/images/14.jpg" />
<img class="p15" src="http://megascripts.ru/demo/animation_css3/images/15.jpg" />
<img class="p16" src="http://megascripts.ru/demo/animation_css3/images/16.jpg" />
<img class="p17" src="http://megascripts.ru/demo/animation_css3/images/17.jpg" />
<img class="p18" src="http://megascripts.ru/demo/animation_css3/images/18.jpg" />
<img class="p19" src="http://megascripts.ru/demo/animation_css3/images/19.jpg" />
<img class="p20" src="http://megascripts.ru/demo/animation_css3/images/20.jpg" />
<img class="p21" src="http://megascripts.ru/demo/animation_css3/images/21.jpg" />
<img class="p22" src="http://megascripts.ru/demo/animation_css3/images/22.jpg" />
<img class="p23" src="http://megascripts.ru/demo/animation_css3/images/23.jpg" />
<img class="p24" src="http://megascripts.ru/demo/animation_css3/images/24.jpg" />
<img class="p25" src="http://megascripts.ru/demo/animation_css3/images/25.jpg" />
<img class="p26" src="http://megascripts.ru/demo/animation_css3/images/1.jpg" />
</div>


Вот и всё, все необходимые файлы находятся в архиве.





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 1695 | Загрузок: 171 | Рейтинг: 4.3/3
Теги: скрипт, CSS3 без JavaScript, анимация
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Слон - единственное животное, не умеющее подпрыгивать.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта