mirror of
https://github.com/bradfrost/this-is-responsive.git
synced 2026-05-10 03:00:48 -04:00
Offloading the CSS animations to another stylesheet
This commit is contained in:
Brad Frost
303
animation.css
303
animation.css
@@ -1,202 +1,283 @@
|
||||
.ani div b {
|
||||
-webkit-animation-direction: alternate;
|
||||
-moz-animation-direction: alternate;
|
||||
-ms-animation-direction: alternate;
|
||||
-o-animation-direction: alternate;
|
||||
}
|
||||
.ani div.a1 b {
|
||||
-webkit-animation: box-resize 10s infinite;
|
||||
-moz-animation: box-resize 10s infinite;
|
||||
-ms-animation: box-resize 10s infinite;
|
||||
-o-animation: box-resize 10s infinite;
|
||||
}
|
||||
.ani div.a2 b {
|
||||
-webkit-animation: box-resize2 10s infinite;
|
||||
-moz-animation: box-resize2 10s infinite;
|
||||
-ms-animation: box-resize2 10s infinite;
|
||||
-o-animation: box-resize2 10s infinite;
|
||||
|
||||
}
|
||||
.ani div.a3 b {
|
||||
-webkit-animation: box-resize3 10s infinite;
|
||||
-moz-animation: box-resize3 10s infinite;
|
||||
-ms-animation: box-resize3 10s infinite;
|
||||
-o-animation: box-resize3 10s infinite;
|
||||
|
||||
}
|
||||
.ani div.a4 b {
|
||||
-webkit-animation: box-resize4 10s infinite;
|
||||
-moz-animation: box-resize4 10s infinite;
|
||||
-ms-animation: box-resize4 10s infinite;
|
||||
-o-animation: box-resize4 10s infinite;
|
||||
|
||||
}
|
||||
.ani div.a5 b {
|
||||
-webkit-animation: box-resize5 10s infinite;
|
||||
-moz-animation: box-resize5 10s infinite;
|
||||
-ms-animation: box-resize5 10s infinite;
|
||||
-o-animation: box-resize5 10s infinite;
|
||||
|
||||
}
|
||||
.ani div.a6 b {
|
||||
-webkit-animation: box-resize6 10s infinite;
|
||||
-moz-animation: box-resize6 10s infinite;
|
||||
-ms-animation: box-resize6 10s infinite;
|
||||
-o-animation: box-resize6 10s infinite;
|
||||
|
||||
}
|
||||
.ani div.a7 b {
|
||||
-webkit-animation: box-resize7 10s infinite;
|
||||
-moz-animation: box-resize7 10s infinite;
|
||||
-ms-animation: box-resize7 10s infinite;
|
||||
-o-animation: box-resize7 10s infinite;
|
||||
|
||||
}
|
||||
.ani div.a8 b {
|
||||
-webkit-animation: box-resize8 10s infinite;
|
||||
-moz-animation: box-resize8 10s infinite;
|
||||
-ms-animation: box-resize8 10s infinite;
|
||||
-o-animation: box-resize8 10s infinite;
|
||||
}
|
||||
.ani div.a9 b {
|
||||
-webkit-animation: box-resize9 10s infinite;
|
||||
-moz-animation: box-resize9 10s infinite;
|
||||
-ms-animation: box-resize9 10s infinite;
|
||||
-o-animation: box-resize9 10s infinite;
|
||||
}
|
||||
.ani div.a10 b {
|
||||
-webkit-animation: box-resize10 10s infinite;
|
||||
-moz-animation: box-resize10 10s infinite;
|
||||
-ms-animation: box-resize10 10s infinite;
|
||||
-o-animation: box-resize10 10s infinite;
|
||||
}
|
||||
|
||||
/*Fluid Animation*/
|
||||
@-webkit-keyframes box-resize {
|
||||
0% { top: 5%; right: 5%; bottom: 5%; left: 5%; }
|
||||
50% { top: 1%; right: 15.5; bottom: 1%; left: 15.5%; }
|
||||
100% { top: 1%; right: 6.4%; bottom: 1%; left: 6Î.4%; }
|
||||
}
|
||||
@-moz-keyframes myanim {
|
||||
@-moz-keyframes box-resize {
|
||||
0% { top: 5%; right: 5%; bottom: 5%; left: 5%; }
|
||||
50% { top: 1%; right: 15.5; bottom: 1%; left: 15.5%; }
|
||||
100% { top: 1%; right: 6.4%; bottom: 1%; left: 6Î.4%; }
|
||||
}
|
||||
@-ms-keyframes myanim {
|
||||
@-ms-keyframes box-resize {
|
||||
0% { top: 5%; right: 5%; bottom: 5%; left: 5%; }
|
||||
50% { top: 1%; right: 15.5; bottom: 1%; left: 15.5%; }
|
||||
100% { top: 1%; right: 6.4%; bottom: 1%; left: 6Î.4%; }
|
||||
}
|
||||
@-o-keyframes myanim {
|
||||
@-o-keyframes box-resize {
|
||||
0% { top: 5%; right: 5%; bottom: 5%; left: 5%; }
|
||||
50% { top: 1%; right: 15.5; bottom: 1%; left: 15.5%; }
|
||||
100% { top: 1%; right: 6.4%; bottom: 1%; left: 6Î.4%; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes box-resize2 {
|
||||
0% { top: 20%; right: 20%; bottom: 20%; left: 20%; }
|
||||
50% { top: 3%; right: 4%; bottom: 3%; left: 4%; }
|
||||
100% { top: 12%; right: 27%; bottom: 12%; left: 27%; }
|
||||
}
|
||||
@-moz-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-moz-keyframes box-resize2 {
|
||||
0% { top: 20%; right: 20%; bottom: 20%; left: 20%; }
|
||||
50% { top: 3%; right: 4%; bottom: 3%; left: 4%; }
|
||||
100% { top: 12%; right: 27%; bottom: 12%; left: 27%; }
|
||||
}
|
||||
@-ms-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-ms-keyframes box-resize2 {
|
||||
0% { top: 20%; right: 20%; bottom: 20%; left: 20%; }
|
||||
50% { top: 3%; right: 4%; bottom: 3%; left: 4%; }
|
||||
100% { top: 12%; right: 27%; bottom: 12%; left: 27%; }
|
||||
}
|
||||
@-o-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-o-keyframes box-resize2 {
|
||||
0% { top: 20%; right: 20%; bottom: 20%; left: 20%; }
|
||||
50% { top: 3%; right: 4%; bottom: 3%; left: 4%; }
|
||||
100% { top: 12%; right: 27%; bottom: 12%; left: 27%; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes box-resize3 {
|
||||
0% { top: 0; right: 0; bottom: 0; left: 0; }
|
||||
50% { top: 6%; right: 18%; bottom: 6%; left: 18%; }
|
||||
100% { top: 2%; right: 22%; bottom: 2%; left: 22%; }
|
||||
}
|
||||
@-moz-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-moz-keyframes box-resize3 {
|
||||
0% { top: 0; right: 0; bottom: 0; left: 0; }
|
||||
50% { top: 6%; right: 18%; bottom: 6%; left: 18%; }
|
||||
100% { top: 2%; right: 22%; bottom: 2%; left: 22%; }
|
||||
|
||||
}
|
||||
@-ms-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-ms-keyframes box-resize3 {
|
||||
0% { top: 0; right: 0; bottom: 0; left: 0; }
|
||||
50% { top: 6%; right: 18%; bottom: 6%; left: 18%; }
|
||||
100% { top: 2%; right: 22%; bottom: 2%; left: 22%; }
|
||||
|
||||
}
|
||||
@-o-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-o-keyframes box-resize3 {
|
||||
0% { top: 0; right: 0; bottom: 0; left: 0; }
|
||||
50% { top: 6%; right: 18%; bottom: 6%; left: 18%; }
|
||||
100% { top: 2%; right: 22%; bottom: 2%; left: 22%; }
|
||||
|
||||
}
|
||||
@-webkit-keyframes box-resize4 {
|
||||
0% { top: 31%; right: 35%; bottom: 31%; left: 35%; }
|
||||
50% { top: 19.2%; right: 29.333%; bottom: 19.2%; left: 29.333%; }
|
||||
100% { top: 14.7%; right: 13%; bottom: 14.7%; left: 13%; }
|
||||
}
|
||||
@-moz-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-moz-keyframes box-resize4 {
|
||||
0% { top: 31%; right: 35%; bottom: 31%; left: 35%; }
|
||||
50% { top: 19.2%; right: 29.333%; bottom: 19.2%; left: 29.333%; }
|
||||
100% { top: 14.7%; right: 13%; bottom: 14.7%; left: 13%; }
|
||||
}
|
||||
@-ms-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-ms-keyframes box-resize4 {
|
||||
0% { top: 31%; right: 35%; bottom: 31%; left: 35%; }
|
||||
50% { top: 19.2%; right: 29.333%; bottom: 19.2%; left: 29.333%; }
|
||||
100% { top: 14.7%; right: 13%; bottom: 14.7%; left: 13%; }
|
||||
}
|
||||
@-o-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-o-keyframes box-resize4 {
|
||||
0% { top: 31%; right: 35%; bottom: 31%; left: 35%; }
|
||||
50% { top: 19.2%; right: 29.333%; bottom: 19.2%; left: 29.333%; }
|
||||
100% { top: 14.7%; right: 13%; bottom: 14.7%; left: 13%; }
|
||||
}
|
||||
@-webkit-keyframes box-resize5 {
|
||||
0% { top: 24%; right: 24%; bottom: 24%; left: 24%; }
|
||||
50% { top: 10%; right: 8%; bottom: 10%; left: 8%; }
|
||||
100% { top: 3%; right: 18.8%; bottom: 3%; left: 18.8%; }
|
||||
}
|
||||
@-moz-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-moz-keyframes box-resize5 {
|
||||
0% { top: 24%; right: 24%; bottom: 24%; left: 24%; }
|
||||
50% { top: 10%; right: 8%; bottom: 10%; left: 8%; }
|
||||
100% { top: 3%; right: 18.8%; bottom: 3%; left: 18.8%; }
|
||||
}
|
||||
@-ms-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-ms-keyframes box-resize5 {
|
||||
0% { top: 24%; right: 24%; bottom: 24%; left: 24%; }
|
||||
50% { top: 10%; right: 8%; bottom: 10%; left: 8%; }
|
||||
100% { top: 3%; right: 18.8%; bottom: 3%; left: 18.8%; }
|
||||
}
|
||||
@-o-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-o-keyframes box-resize5 {
|
||||
0% { top: 24%; right: 24%; bottom: 24%; left: 24%; }
|
||||
50% { top: 10%; right: 8%; bottom: 10%; left: 8%; }
|
||||
100% { top: 3%; right: 18.8%; bottom: 3%; left: 18.8%; }
|
||||
}
|
||||
@-webkit-keyframes box-resize6 {
|
||||
0% { top: 5%; right: 25%; bottom: 5%; left: 25%; }
|
||||
50% { top: 2%; right: 35%; bottom: 2%; left: 35%; }
|
||||
100% { top: 4%; right: 33%; bottom: 4%; left: 33%; }
|
||||
}
|
||||
@-moz-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-moz-keyframes box-resize6 {
|
||||
0% { top: 5%; right: 25%; bottom: 5%; left: 25%; }
|
||||
50% { top: 2%; right: 35%; bottom: 2%; left: 35%; }
|
||||
100% { top: 4%; right: 33%; bottom: 4%; left: 33%; }
|
||||
}
|
||||
@-ms-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-ms-keyframes box-resize6 {
|
||||
0% { top: 5%; right: 25%; bottom: 5%; left: 25%; }
|
||||
50% { top: 2%; right: 35%; bottom: 2%; left: 35%; }
|
||||
100% { top: 4%; right: 33%; bottom: 4%; left: 33%; }
|
||||
}
|
||||
@-o-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-o-keyframes box-resize6 {
|
||||
0% { top: 5%; right: 25%; bottom: 5%; left: 25%; }
|
||||
50% { top: 2%; right: 35%; bottom: 2%; left: 35%; }
|
||||
100% { top: 4%; right: 33%; bottom: 4%; left: 33%; }
|
||||
}
|
||||
@-webkit-keyframes box-resize7 {
|
||||
0% { top: 23%; right: 23%; bottom: 23%; left: 23%; }
|
||||
50% { top: 13%; right: 21%; bottom: 13%; left: 21%; }
|
||||
100% { top: 8%; right: 40%; bottom: 8%; left: 40%; }
|
||||
}
|
||||
@-moz-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-moz-keyframes box-resize7 {
|
||||
0% { top: 23%; right: 23%; bottom: 23%; left: 23%; }
|
||||
50% { top: 13%; right: 21%; bottom: 13%; left: 21%; }
|
||||
100% { top: 8%; right: 40%; bottom: 8%; left: 40%; }
|
||||
}
|
||||
@-ms-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-ms-keyframes box-resize7 {
|
||||
0% { top: 23%; right: 23%; bottom: 23%; left: 23%; }
|
||||
50% { top: 13%; right: 21%; bottom: 13%; left: 21%; }
|
||||
100% { top: 8%; right: 40%; bottom: 8%; left: 40%; }
|
||||
}
|
||||
@-o-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-o-keyframes box-resize7 {
|
||||
0% { top: 23%; right: 23%; bottom: 23%; left: 23%; }
|
||||
50% { top: 13%; right: 21%; bottom: 13%; left: 21%; }
|
||||
100% { top: 8%; right: 40%; bottom: 8%; left: 40%; }
|
||||
}
|
||||
@-webkit-keyframes box-resize8 {
|
||||
0% { top: 17%; right: 40%; bottom: 17%; left: 40%; }
|
||||
50% { top: 24%; right: 44%; bottom: 24%; left: 44%; }
|
||||
100% { top: 21%; right: 30%; bottom: 21%; left: 30%; }
|
||||
}
|
||||
@-moz-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-moz-keyframes box-resize8 {
|
||||
0% { top: 17%; right: 40%; bottom: 17%; left: 40%; }
|
||||
50% { top: 24%; right: 44%; bottom: 24%; left: 44%; }
|
||||
100% { top: 21%; right: 30%; bottom: 21%; left: 30%; }
|
||||
}
|
||||
@-ms-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-ms-keyframes box-resize8 {
|
||||
0% { top: 17%; right: 40%; bottom: 17%; left: 40%; }
|
||||
50% { top: 24%; right: 44%; bottom: 24%; left: 44%; }
|
||||
100% { top: 21%; right: 30%; bottom: 21%; left: 30%; }
|
||||
}
|
||||
@-o-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-o-keyframes box-resize8 {
|
||||
0% { top: 17%; right: 40%; bottom: 17%; left: 40%; }
|
||||
50% { top: 24%; right: 44%; bottom: 24%; left: 44%; }
|
||||
100% { top: 21%; right: 30%; bottom: 21%; left: 30%; }
|
||||
}
|
||||
@-webkit-keyframes box-resize9 {
|
||||
0% { top: 12%; right: 12%; bottom: 12%; left: 12%; }
|
||||
50% { top: 23.333%; right: 5%; bottom: 23.333%; left: 5%; }
|
||||
100% { top: 12%; right: 2%; bottom: 12%; left: 2%; }
|
||||
}
|
||||
@-moz-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-moz-keyframes box-resize9 {
|
||||
0% { top: 12%; right: 12%; bottom: 12%; left: 12%; }
|
||||
50% { top: 23.333%; right: 5%; bottom: 23.333%; left: 5%; }
|
||||
100% { top: 12%; right: 2%; bottom: 12%; left: 2%; }
|
||||
|
||||
}
|
||||
@-ms-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-ms-keyframes box-resize9 {
|
||||
0% { top: 12%; right: 12%; bottom: 12%; left: 12%; }
|
||||
50% { top: 23.333%; right: 5%; bottom: 23.333%; left: 5%; }
|
||||
100% { top: 12%; right: 2%; bottom: 12%; left: 2%; }
|
||||
|
||||
}
|
||||
@-o-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-o-keyframes box-resize9 {
|
||||
0% { top: 12%; right: 12%; bottom: 12%; left: 12%; }
|
||||
50% { top: 23.333%; right: 5%; bottom: 23.333%; left: 5%; }
|
||||
100% { top: 12%; right: 2%; bottom: 12%; left: 2%; }
|
||||
|
||||
}
|
||||
@-webkit-keyframes box-resize10 {
|
||||
0% { top: 29%; right: 22%; bottom: 29%; left: 22%; }
|
||||
50% { top: 11%; right: 11%; bottom: 11%; left: 11%; }
|
||||
100% { top: 22%; right: 2%; bottom: 22%; left: 2%; }
|
||||
}
|
||||
@-moz-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-moz-keyframes box-resize10 {
|
||||
0% { top: 29%; right: 22%; bottom: 29%; left: 22%; }
|
||||
50% { top: 11%; right: 11%; bottom: 11%; left: 11%; }
|
||||
100% { top: 22%; right: 2%; bottom: 22%; left: 2%; }
|
||||
}
|
||||
@-ms-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-ms-keyframes box-resize10 {
|
||||
0% { top: 29%; right: 22%; bottom: 29%; left: 22%; }
|
||||
50% { top: 11%; right: 11%; bottom: 11%; left: 11%; }
|
||||
100% { top: 22%; right: 2%; bottom: 22%; left: 2%; }
|
||||
}
|
||||
@-o-keyframes box-resize {
|
||||
0% { opacity: 0.0; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1.0; }
|
||||
@-o-keyframes box-resize10 {
|
||||
0% { top: 29%; right: 22%; bottom: 29%; left: 22%; }
|
||||
50% { top: 11%; right: 11%; bottom: 11%; left: 11%; }
|
||||
100% { top: 22%; right: 2%; bottom: 22%; left: 2%; }
|
||||
}
|
||||
/*End Animations*/
|
||||
@@ -5,6 +5,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="This Is Responsive | Tips, Resources and Patterns for Responsive Web Design" />
|
||||
<link rel="stylesheet" type="text/css" media="all" href="styles.css">
|
||||
<link rel="stylesheet" type="text/css" media="all" href="animation.css">
|
||||
<title>This Is Responsive | Tips, Resources and Patterns for Responsive Web Design</title>
|
||||
<script type="text/javascript" src="js/modernizr.js"></script>
|
||||
</head>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<section id="concepts">
|
||||
<h3>Broader Concepts</h3>
|
||||
<ul>
|
||||
<li class="featured"><a href="http://www.alistapart.com/articles/responsive-web-design">Future Friendly</a></li>
|
||||
<li class="featured"><a href="http://futurefriend.ly">Future Friendly</a></li>
|
||||
<li class="featured"><a href="http://www.lukew.com/ff/entry.asp?933">Mobile First</a></li>
|
||||
<li class="featured"><a href="http://adactio.com/journal/4523/">Content First</a></li>
|
||||
<li><a href="http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/">COPE: Create Once, Publish Everywhere</a></li>
|
||||
|
||||
42
styles.css
42
styles.css
@@ -171,49 +171,9 @@ footer[role=contentinfo] img {
|
||||
bottom: 5%;
|
||||
left: 5%;
|
||||
background: rgba(229,24,55,0.22);
|
||||
|
||||
}
|
||||
.ani div.a1 b {
|
||||
-webkit-animation: box-resize 10s infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
.ani div.a2 b {
|
||||
-webkit-animation: box-resize2 10s infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
.ani div.a3 b {
|
||||
-webkit-animation: box-resize3 10s infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
.ani div.a4 b {
|
||||
-webkit-animation: box-resize4 10s infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
.ani div.a5 b {
|
||||
-webkit-animation: box-resize5 10s infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
.ani div.a6 b {
|
||||
-webkit-animation: box-resize6 10s infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
.ani div.a7 b {
|
||||
-webkit-animation: box-resize7 10s infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
.ani div.a8 b {
|
||||
-webkit-animation: box-resize8 10s infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
.ani div.a9 b {
|
||||
-webkit-animation: box-resize9 10s infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
.ani div.a10 b {
|
||||
-webkit-animation: box-resize10 10s infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
}
|
||||
|
||||
|
||||
/*Patterns*/
|
||||
.pattern {
|
||||
padding-bottom: 1em;
|
||||
|
||||
Reference in New Issue
Block a user