Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

923 lines (825 sloc) 23.897 kb
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width maximum-scale=1 initial-scale=1 user-scalable=no">
</head>
<title>IonicBonding · Made with Sencha Animator</title>
<style type="text/css">
#AN-sObj-stage {
position: relative;
overflow:hidden;
-webkit-perspective: 600;
}
#AN-sObj-stage div { position: absolute; }
#AN-sObj-stage a {color: inherit; text-decoration:none;}
#AN-sObj-stage * {margin:0; padding:0;-webkit-transform-style:preserves-3d;}
#AN-sObj-stage {margin:0; padding:0;}
#AN-sObj-stage{ width: 300px;
height: 248px;
background-color: white;
}
#AN-sObj-1{ width: 400px;
height: 280px;
background-color: #C0C0C0;
top: -22px;
left: -24px;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#999999), to(#999999), color-stop(.7,#333333));;
}
#AN-sObj-2{ top: 205px;
left: 22px;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
color: #FFFFFF;
font-size: 24px;
}
#AN-sObj-3{ top: 190px;
left: 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
color: #FFFFFF;
font-size: 16px;
text-align: center;
width: 280px;
padding-right:10px;
padding-left:10px;;
}
#AN-sObj-4{ top: 190px;
left: 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
color: #FFFFFF;
font-size: 16px;
text-align: center;
width: 280px;
padding-right:10px;
padding-left:10px;;
}
#AN-sObj-5{ top: 190px;
left: 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
color: #FFFFFF;
font-size: 16px;
text-align: center;
width: 280px;
padding-right:10px;
padding-left:10px;;
}
#AN-sObj-6{ top: 190px;
left: 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
color: #FFFFFF;
font-size: 16px;
text-align: center;
width: 280px;
padding-right:10px;
padding-left:10px;;
}
#AN-sObj-7{ top: 189px;
left: 15px;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
color: #FFFFFF;
font-size: 18px;
text-align: center;
width: 255px;
}
#AN-sObj-8{ top: 189px;
left: 18px;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
color: #FFFFFF;
font-size: 18px;
text-align: center;
width: 255px;
}
#AN-sObj-9{ top: 190px;
left: 25px;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
color: #FFFFFF;
font-size: 18px;
text-align: left;
width: 255px;
}
#AN-sObj-10{ -webkit-transform: scale3d(1.7, 1, 1) skew(0deg, 0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
width: 200px;
height: 300px;
-webkit-border-radius: 2px;
top: -46px;
left: 47px;
background-image:-webkit-gradient(radial, center center, 10, center center, 60, from(grey), to(rgba(255,255,255,0)));
;
}
#AN-sObj-11{ width: 75px;
height: 75px;
-webkit-border-radius: 103px;
top: 47px;
left: -85px;
background-image:-webkit-gradient(radial, center 30%, 10, center center, 80, from(red), to(rgba(0,0,255,.5)), color-stop(.7,rgb(20,20,20)));;
text-align: center;
-webkit-text-stroke: 2px white;
color: white;
font-size: 24px;
line-height: 180%;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
}
#AN-sObj-12{ width: 75px;
height: 75px;
-webkit-border-radius: 103px;
top: 47px;
left: 355px;
background-image:-webkit-gradient(radial, center 30%, 10, center center, 80, from(blue), to(rgba(0,0,255,.5)), color-stop(.7,rgb(20,20,20)));;
text-align: center;
-webkit-text-stroke: 2px white;
color: white;
font-size: 24px;
line-height: 180%;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
}
#AN-sObj-13{ top: 1px;
left: -7px;
width: 100px;
height: 100px;
overflow: visible;
}
#AN-sObj-14{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
top: 50px;
left: 31px;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#AN-sObj-15{ width: 10px;
height: 10px;
background-color: #000000;
-webkit-border-radius: 103px;
top: 4px;
left: 81px;
}
#AN-sObj-16{ width: 10px;
height: 10px;
background-color: #000000;
-webkit-border-radius: 103px;
top: 87px;
left: 6px;
}
#AN-sObj-17{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
top: 50px;
left: 30px;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#AN-sObj-18{ width: 10px;
height: 10px;
background-color: #000000;
-webkit-border-radius: 103px;
top: -13px;
left: 46px;
}
#AN-sObj-19{ width: 10px;
height: 10px;
background-color: #000000;
-webkit-border-radius: 103px;
top: 90px;
left: 74px;
}
#AN-sObj-20{ width: 10px;
height: 10px;
background-color: #000000;
-webkit-border-radius: 103px;
top: 103px;
left: 27px;
}
#AN-sObj-21{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
top: 50px;
left: 32px;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#AN-sObj-22{ width: 10px;
height: 10px;
background-color: #000000;
-webkit-border-radius: 103px;
top: 44px;
left: -14px;
}
#AN-sObj-23{ width: 10px;
height: 10px;
background-color: #000000;
-webkit-border-radius: 103px;
top: 106px;
left: 64px;
}
#AN-sObj-24{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
top: 50px;
left: 32px;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
#AN-sObj-25{ width: 10px;
height: 10px;
-webkit-border-radius: 103px;
top: 36px;
left: 96px;
background-image:-webkit-gradient(radial, center 30%, 5, center center, 20, from(red), to(rgba(0,0,255,.5)), color-stop(.7,rgb(20,20,20)));
}
#AN-sObj-26{ top: 2px;
left: 139px;
width: 100px;
height: 100px;
overflow: visible;
}
#AN-sObj-27{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
top: 50px;
left: 31px;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: 16;
-webkit-animation-timing-function: linear;
opacity: 1;
}
#AN-sObj-28{ width: 10px;
height: 10px;
background-color: #FFCC00;
-webkit-border-radius: 103px;
top: -4px;
left: 96px;
background-image:-webkit-gradient(radial, center 30%, 5, center center, 20, from(yellow), to(rgba(0,0,255,.5)), color-stop(.7,rgb(20,20,20)));
}
#AN-sObj-29{ width: 10px;
height: 10px;
background-color: #FFCC00;
-webkit-border-radius: 103px;
top: 96px;
left: -3px;
background-image:-webkit-gradient(radial, center 30%, 5, center center, 20, from(yellow), to(rgba(0,0,255,.5)), color-stop(.7,rgb(20,20,20)));
}
#AN-sObj-30{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
top: 50px;
left: 30px;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
opacity: 1;
}
#AN-sObj-31{ width: 10px;
height: 10px;
background-color: #FFCC00;
-webkit-border-radius: 103px;
top: -4px;
left: 49px;
background-image:-webkit-gradient(radial, center 30%, 5, center center, 20, from(yellow), to(rgba(0,0,255,.5)), color-stop(.7,rgb(20,20,20)));
}
#AN-sObj-32{ width: 10px;
height: 10px;
background-color: #FFCC00;
-webkit-border-radius: 103px;
top: 84px;
left: 98px;
background-image:-webkit-gradient(radial, center 30%, 5, center center, 20, from(yellow), to(rgba(0,0,255,.5)), color-stop(.7,rgb(20,20,20)));
}
#AN-sObj-33{ width: 10px;
height: 10px;
background-color: #FFCC00;
-webkit-border-radius: 103px;
top: 94px;
left: -6px;
background-image:-webkit-gradient(radial, center 30%, 5, center center, 20, from(yellow), to(rgba(0,0,255,.5)), color-stop(.7,rgb(20,20,20)));
}
#AN-sObj-34{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
top: 50px;
left: 32px;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
opacity: 1;
background-color: rgba(0,0,0,0);
}
#AN-sObj-35{ width: 10px;
height: 10px;
background-color: #FFCC00;
-webkit-border-radius: 103px;
top: 34px;
left: 96px;
background-image:-webkit-gradient(radial, center 30%, 5, center center, 20, from(yellow), to(rgba(0,0,255,.5)), color-stop(.7,rgb(20,20,20)));
}
#AN-sObj-36{ width: 10px;
height: 10px;
background-color: #FFCC00;
-webkit-border-radius: 103px;
top: 56px;
left: -6px;
background-image:-webkit-gradient(radial, center 30%, 5, center center, 20, from(yellow), to(rgba(0,0,255,.5)), color-stop(.7,rgb(20,20,20)));
}
#AN-sObj-37{ -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
top: 50px;
left: 32px;
width: 100px;
height: 100px;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
opacity: 1;
}
#AN-sObj-38{ width: 10px;
height: 10px;
background-color: #000000;
-webkit-border-radius: 103px;
top: 96px;
left: 59px;
}
#AN-sObj-39{ width: 75px;
height: 75px;
-webkit-border-radius: 103px;
top: 94px;
left: 176px;
text-align: center;
-webkit-text-stroke: 2px white;
color: white;
font-size: 24px;
line-height: 180%;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
}
#AN-sObj-40{ width: 75px;
height: 75px;
-webkit-border-radius: 103px;
top: 91px;
left: 49px;
text-align: center;
-webkit-text-stroke: 2px white;
color: white;
font-size: 24px;
line-height: 180%;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, Geneva, sans-serif;
}
@-webkit-keyframes AN-ani-0 {
0% {
opacity: 0;
}
21.12% {
opacity: 1;
}
77.89% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes AN-ani-1 {
0% {
opacity: 0;
opacity:0;
}
48.159% {
opacity: 0;
opacity:0;
}
48.16% {
opacity: 0;
}
57.56% {
opacity: 1;
}
90.16% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes AN-ani-2 {
0% {
opacity: 0;
opacity:0;
}
65.829% {
opacity: 0;
opacity:0;
}
65.83% {
opacity: 0;
}
72.02% {
opacity: 1;
}
93.51% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes AN-ani-3 {
0% {
opacity: 0;
opacity:0;
}
72.029% {
opacity: 0;
opacity:0;
}
72.03% {
opacity: 0;
}
76.47% {
opacity: 1;
}
95.35% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes AN-ani-4 {
0% {
opacity: 0;
opacity:0;
}
66.249% {
opacity: 0;
opacity:0;
}
66.25% {
opacity: 0;
}
69.32% {
opacity: 1;
}
96.78% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes AN-ani-5 {
0% {
opacity: 0;
opacity:0;
}
85.709% {
opacity: 0;
opacity:0;
}
85.71% {
opacity: 0;
}
88.3% {
opacity: 1;
}
97.29% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes AN-ani-6 {
0% {
opacity: 0;
opacity:0;
}
87.219% {
opacity: 0;
opacity:0;
}
87.22% {
opacity: 0;
}
89.54% {
opacity: 1;
}
97.57% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes AN-ani-7 {
0% {
opacity: 0;
opacity:0;
}
92.459% {
opacity: 0;
opacity:0;
}
92.46% {
opacity: 0;
}
94.63% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes AN-ani-8 {
0% {
-webkit-transform: scale3d(1.7, 1, 1) skew(0deg, 0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 0;
opacity:0;
}
92.359% {
-webkit-transform: scale3d(1.7, 1, 1) skew(0deg, 0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 0;
opacity:0;
}
92.36% {
-webkit-transform: scale3d(1.7, 1, 1) skew(0deg, 0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 0;
}
94.62% {
-webkit-transform: scale3d(1.7, 1, 1) skew(0deg, 0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
}
100% {
-webkit-transform: scale3d(1.7, 1, 1) skew(0deg, 0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
}
}
@-webkit-keyframes AN-ani-9 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-animation-timing-function: ease;
}
10.64% {
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-animation-timing-function: ease;
}
12.72% {
-webkit-transform: translate3d(122px, 19px, 0px);
-webkit-animation-timing-function: ease;
}
44.58% {
-webkit-transform: translate3d(122px, 19px, 0px);
-webkit-animation-timing-function: ease;
}
46.76% {
-webkit-transform: translate3d(122px, 19px, 0px);
-webkit-animation-timing-function: ease;
}
96.01% {
-webkit-transform: translate3d(122px, 19px, 0px);
-webkit-animation-timing-function: linear;
}
100% {
-webkit-transform: translate3d(142px, 19px, 0px);
-webkit-animation-timing-function: ease;
}
}
@-webkit-keyframes AN-ani-10 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-animation-timing-function: ease;
}
22.06% {
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-animation-timing-function: ease;
}
25.57% {
-webkit-transform: translate3d(-170px, 19px, 0px);
-webkit-animation-timing-function: ease;
}
44.58% {
-webkit-transform: translate3d(-170px, 19px, 0px);
-webkit-animation-timing-function: ease;
}
46.76% {
-webkit-transform: translate3d(-170px, 19px, 0px);
-webkit-animation-timing-function: ease;
}
96.01% {
-webkit-transform: translate3d(-170px, 19px, 0px);
-webkit-animation-timing-function: linear;
}
100% {
-webkit-transform: translate3d(-190px, 19px, 0px);
-webkit-animation-timing-function: ease;
}
}
@-webkit-keyframes AN-ani-11 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
}
47.13% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
}
62.63% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 1;
}
86.6% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
}
}
@-webkit-keyframes AN-ani-12 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(75deg);
opacity:0;
}
0.079% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(75deg);
opacity:0;
}
0.08% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(75deg);
}
58.11% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(3225deg);
}
61.22% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(2, 2, 1) rotateX(0deg) rotateY(0deg) rotateZ(3225deg);
}
75.41% {
-webkit-transform: translate3d(125px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(3625deg);
}
100% {
-webkit-transform: translate3d(125px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(4300deg);
}
}
@-webkit-keyframes AN-ani-13 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
}
47.13% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
}
62.63% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 1;
}
86.6% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
}
}
@-webkit-keyframes AN-ani-14 {
0% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity:0;
}
0.069% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity:0;
}
0.07% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(5760deg);
}
}
@-webkit-keyframes AN-ani-15 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(200deg);
opacity:0;
}
0.069% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(200deg);
opacity:0;
}
0.07% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(200deg);
}
100% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(7840deg);
}
}
@-webkit-keyframes AN-ani-16 {
0% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(75deg);
opacity:0;
}
0.079% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(75deg);
opacity:0;
}
0.08% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(75deg);
}
100% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(8300deg);
}
}
@-webkit-keyframes AN-ani-17 {
0% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(75deg);
opacity: 1;
opacity:0;
}
0.119% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(75deg);
opacity: 1;
opacity:0;
}
0.12% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(75deg);
opacity: 1;
}
92.73% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(3600deg);
opacity: 1;
}
100% {
-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(3900deg);
opacity: 0;
}
}
@-webkit-keyframes AN-ani-18 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
-webkit-animation-timing-function: ease;
opacity:0;
}
82.539% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
-webkit-animation-timing-function: ease;
opacity:0;
}
82.54% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
-webkit-animation-timing-function: ease;
}
84.82% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 1;
-webkit-animation-timing-function: ease;
}
90.27% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 1;
-webkit-animation-timing-function: ease;
}
96.01% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 1;
-webkit-animation-timing-function: linear;
}
100% {
-webkit-transform: translate3d(-20px, 0px, 0px);
opacity: 1;
-webkit-animation-timing-function: ease;
}
}
@-webkit-keyframes AN-ani-19 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
-webkit-animation-timing-function: ease;
opacity:0;
}
73.329% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
-webkit-animation-timing-function: ease;
opacity:0;
}
73.33% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 0;
-webkit-animation-timing-function: ease;
}
75.41% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 1;
-webkit-animation-timing-function: ease;
}
96.01% {
-webkit-transform: translate3d(0px, 0px, 0px);
opacity: 1;
-webkit-animation-timing-function: linear;
}
100% {
-webkit-transform: translate3d(20px, 0px, 0px);
opacity: 1;
-webkit-animation-timing-function: ease;
}
}
</style>
</head>
<body style="margin:0">
<div id="stage-container">
<div id="AN-sObj-stage"><div id="AN-sObj-1" class="AN-Object"><span id="AN-sObj-val-1"></span></div><div id="AN-sObj-2" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-0; -webkit-animation-duration: 3.03s; "><span id="AN-sObj-val-2">Ionic Bonding Animation</span></div><div id="AN-sObj-3" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-1; -webkit-animation-duration: 6.81s; "><span id="AN-sObj-val-3">A Sodium Atom Must <b><u>Lose</u></b> One Electron To Reach A Stable State</span></div><div id="AN-sObj-4" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-2; -webkit-animation-duration: 10.33s; "><span id="AN-sObj-val-4">A Chlorine Atom Must <b><u>Gain</u></b> One Electron To Reach A Stable State</span></div><div id="AN-sObj-5" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-3; -webkit-animation-duration: 14.41s; "><span id="AN-sObj-val-5">When Chlorine and Sodium Collide With Sufficient Force</span></div><div id="AN-sObj-6" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-4; -webkit-animation-duration: 20.83s; "><span id="AN-sObj-val-6">The Sodium Atom Donates Its Electron To The Chlorine Atom</span></div><div id="AN-sObj-7" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-5; -webkit-animation-duration: 24.7s; "><span id="AN-sObj-val-7">The Sodium Atom Gains a Positive Charge</span></div><div id="AN-sObj-8" class="AN-Object" style="opacity: 0; -webkit-animation-name: AN-ani-6; -webkit-animation-duration: 27.62s; "><span id="AN-sObj-val-8">The Chlorine Atom Gains a Negative Charge</span></div><div id="AN-sObj-9" class="AN-Object" style="opacity: 1; -webkit-animation-name: AN-ani-7; -webkit-animation-duration: 29.59s; "><span id="AN-sObj-val-9">Forming an Electro-Static Bond</span></div><div id="AN-sObj-10" class="AN-Object" style="-webkit-transform: scale3d(1.7, 1, 1) skew(0deg, 0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1; -webkit-animation-name: AN-ani-8; -webkit-animation-duration: 29.5905s; "><span id="AN-sObj-val-10"></span></div><div id="AN-sObj-11" class="AN-Object" style="-webkit-transform: translate3d(142px, 19px, 0px); -webkit-animation-timing-function: ease; -webkit-animation-name: AN-ani-9; -webkit-animation-duration: 30.82s; "><span id="AN-sObj-val-11">Na</span></div><div id="AN-sObj-12" class="AN-Object" style="-webkit-transform: translate3d(-190px, 19px, 0px); -webkit-animation-timing-function: ease; -webkit-animation-name: AN-ani-10; -webkit-animation-duration: 30.82s; "><span id="AN-sObj-val-12">Cl</span></div><div id="AN-sObj-13" class="AN-Object" style="-webkit-transform: translate3d(0px, 0px, 0px); opacity: 0; -webkit-animation-name: AN-ani-11; -webkit-animation-duration: 21.94s; "><span id="AN-sObj-val-13"></span><div id="AN-sObj-24" class="AN-Object" style="-webkit-transform: translate3d(125px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(4300deg); -webkit-animation-name: AN-ani-12; -webkit-animation-duration: 23.75s; "><span id="AN-sObj-val-24"></span><div id="AN-sObj-25" class="AN-Object"><span id="AN-sObj-val-25"></span></div></div></div><div id="AN-sObj-26" class="AN-Object" style="-webkit-transform: translate3d(0px, 0px, 0px); opacity: 0; -webkit-animation-name: AN-ani-13; -webkit-animation-duration: 21.94s; "><span id="AN-sObj-val-26"></span><div id="AN-sObj-27" class="AN-Object" style="-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(5760deg); -webkit-animation-name: AN-ani-14; -webkit-animation-duration: 27.21s; "><span id="AN-sObj-val-27"></span><div id="AN-sObj-28" class="AN-Object"><span id="AN-sObj-val-28"></span></div><div id="AN-sObj-29" class="AN-Object"><span id="AN-sObj-val-29"></span></div></div><div id="AN-sObj-30" class="AN-Object" style="-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(7840deg); -webkit-animation-name: AN-ani-15; -webkit-animation-duration: 28.51s; "><span id="AN-sObj-val-30"></span><div id="AN-sObj-31" class="AN-Object"><span id="AN-sObj-val-31"></span></div><div id="AN-sObj-32" class="AN-Object"><span id="AN-sObj-val-32"></span></div><div id="AN-sObj-33" class="AN-Object"><span id="AN-sObj-val-33"></span></div></div><div id="AN-sObj-34" class="AN-Object" style="-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(8300deg); -webkit-animation-name: AN-ani-16; -webkit-animation-duration: 25.84s; "><span id="AN-sObj-val-34"></span><div id="AN-sObj-35" class="AN-Object"><span id="AN-sObj-val-35"></span></div><div id="AN-sObj-36" class="AN-Object"><span id="AN-sObj-val-36"></span></div></div><div id="AN-sObj-37" class="AN-Object" style="-webkit-transform: scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(3900deg); opacity: 0; -webkit-animation-name: AN-ani-17; -webkit-animation-duration: 16.79s; "><span id="AN-sObj-val-37"></span><div id="AN-sObj-38" class="AN-Object"><span id="AN-sObj-val-38"></span></div></div></div><div id="AN-sObj-39" class="AN-Object" style="-webkit-transform: translate3d(-20px, 0px, 0px); opacity: 1; -webkit-animation-timing-function: ease; -webkit-animation-name: AN-ani-18; -webkit-animation-duration: 30.82s; "><span id="AN-sObj-val-39">-</span></div><div id="AN-sObj-40" class="AN-Object" style="-webkit-transform: translate3d(20px, 0px, 0px); opacity: 1; -webkit-animation-timing-function: ease; -webkit-animation-name: AN-ani-19; -webkit-animation-duration: 30.82s; "><span id="AN-sObj-val-40">+</span></div></div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.