Chia sẻ - CSS3 Infinite Zoom - Mã nguồn gốc | VN-Zoom | Cộng đồng Chia Sẻ Kiến Thức Công Nghệ và Phần Mềm Máy Tính
Up Ảnh Speedtest VNZ-News Telegram
VNZoom Beta

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We need money to operate the site, and almost all of it comes from our online advertising.

If possible, please support us by clicking on the advertisements.

Please add vn-z.vn to your ad blocking whitelist or disable your adblocking software.

×

Chia sẻ CSS3 Infinite Zoom - Mã nguồn gốc

M

malemkhoang

Rìu Chiến
s-qvFpGJnQYFJ01K2yIWjiMeeJzwKNSQ6dd5wXKWRJd-jn_uLWczm-41kph5DePjXRv8mKF9mZ4a-2mIfU1fYyX7bDH3rjRtZlxRdHkat_k0dUvBYd5jYryp1QU9bnO8x-2-L8PbDA=s512-no

<html lang="en"><head>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<title> CSS - Infinite Zoom | 30 years Photoshop Release</title>
<head>
<style>
#zoom {width:512px; height:512px; overflow:hidden; position:relative; border:5px solid #000; 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:60s;
-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}


/* for Opera */
@-o-keyframes zoom1 {
0% {-o-transform: scale(1);}
3.5% {-o-transform: scale(2);}
3.55% {-o-transform: scale(1);}
100% {-o-transform: scale(1);}
}

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

/* for IE10 */
@keyframes zoom1 {
0% {transform: scale(1);}
3.5% {transform: scale(2);}
3.55% {transform: scale(1);}
100% {transform: scale(1);}
}

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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

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

<style>
.SnapLinksContainer :not([xyz]) { }
.SnapLinksContainer .SnapLinksHighlighter {
all: initial; overflow: visible;
position: absolute; top: 0px; left: 0px; width: 10px; height: 10px;
}
.SnapLinksContainer {
pointer-events: none; z-index: 999999;
position: absolute; top: 0px; left: 0px; margin: 0px; padding: 0px; height: 0px; width: 0px; }
.SnapLinksContainer > .SL_SelectionRect { outline: 2px dashed rgba(0,200,0,1); position: absolute; overflow: visible; z-index: 1; }
.SL_SelectionRect > .SL_SelectionLabel { position: absolute; background: #FFFFD9; border: 1px solid black; border-radius: 2px; padding: 2px; font: normal 12px Verdana; white-space: nowrap; color: #000000; }
</style></head>

<body>

<section>

<div>
<h2>CSS3 - Infinite Zoom...zoooom...zoooooom!</h2>
<h3>30 Years Photoshop Release: 19th February (1990 - 2020)</h3>
<h4>(For all modern browsers)</h4>
<br>

<div id="zoom">
<img class="p1" src="https://upanh.vn-z.vn/images/2020/03/14/1.jpg">
<img class="p2" src="https://upanh.vn-z.vn/images/2020/03/14/2.jpg">
<img class="p2a" src="https://upanh.vn-z.vn/images/2020/03/14/3.jpg">
<img class="p3" src="https://upanh.vn-z.vn/images/2020/03/14/4.jpg">
<img class="p4" src="https://upanh.vn-z.vn/images/2020/03/14/5.jpg">
<img class="p5" src="https://upanh.vn-z.vn/images/2020/03/14/6.jpg">
<img class="p6" src="https://upanh.vn-z.vn/images/2020/03/14/7.jpg">
<img class="p7" src="https://upanh.vn-z.vn/images/2020/03/14/8.jpg">
<img class="p8" src="https://upanh.vn-z.vn/images/2020/03/14/9.jpg">
<img class="p9" src="https://upanh.vn-z.vn/images/2020/03/14/10.jpg">
<img class="p10" src="https://upanh.vn-z.vn/images/2020/03/14/11.jpg">
<img class="p11" src="https://upanh.vn-z.vn/images/2020/03/14/12.jpg">
<img class="p12" src="https://upanh.vn-z.vn/images/2020/03/14/13.jpg">
<img class="p13" src="https://upanh.vn-z.vn/images/2020/03/14/14.jpg">
<img class="p14" src="https://upanh.vn-z.vn/images/2020/03/14/15.jpg">
<img class="p15" src="https://upanh.vn-z.vn/images/2020/03/14/16.jpg">
<img class="p16" src="https://upanh.vn-z.vn/images/2020/03/14/17.jpg">
<img class="p17" src="https://upanh.vn-z.vn/images/2020/03/14/18.jpg">
<img class="p18" src="https://upanh.vn-z.vn/images/2020/03/14/19.jpg">
<img class="p19" src="https://upanh.vn-z.vn/images/2020/03/14/20.jpg">
<img class="p20" src="https://upanh.vn-z.vn/images/2020/03/14/21.jpg">
<img class="p21" src="https://upanh.vn-z.vn/images/2020/03/14/22.jpg">
<img class="p22" src="https://upanh.vn-z.vn/images/2020/03/14/23.jpg">
<img class="p23" src="https://upanh.vn-z.vn/images/2020/03/14/24.jpg">
<img class="p24" src="https://upanh.vn-z.vn/images/2020/03/14/25.jpg">
<img class="p25" src="https://upanh.vn-z.vn/images/2020/03/14/26.jpg">
<img class="p26" src="https://upanh.vn-z.vn/images/2020/03/14/1.jpg">
</div>
<br>

</div>
</section>
<malemkhoang></malemkhoang>
</body></html>

Nguồn: Stu Nicholls (CSS PLAY)​
 

Chủ đề tương tự

Đợt tấn công DDoS gần 30Gbps mới nhất tại VN
Đối với máy chủ, chỉ nghe nói thôi thì chưa đủ, cần trải nghiệm
Đổi Site Url của website WordPress từ Hosting
Đôi nét về Wordpress 5.0 - Anh em cùng vào thảo luận nhé
Đổi mật khẩu admin website từ Hosting
You must log in or register to reply here.


ĐANG THẢO LUẬN

ĐỪNG BÕ LỠ

Bài Viết Mới

Top