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

malemkhoang · 14/3/20

<html lang="en"><head>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">


<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)

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

malemkhoang

Rìu Chiến

Chủ đề tương tự

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

malemkhoang

Rìu Chiến

Chủ đề tương tự

Privacy & Transparency

Privacy & Transparency