css3满天金光飞舞效果,CSS3金光四射的钥匙

CSS

语言：

CSSSCSS

确定

body {

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

background-color: #222;

font-family: "proxima-nova-soft";

font-size: 0;

color: #424950;

-webkit-user-select: none;

cursor: default;

}

.key {

position: absolute;

left: 50%;

top: 50%;

margin-left: -90px;

margin-top: -95px;

cursor: pointer;

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes float{ 0% { -webkit-transform: translate3d(0,0,0); } 50% { -webkit-transform: translate3d(0,8px,0); }}

@-moz-keyframes float{ 0% { -moz-transform: translate3d(0,0,0); } 50% { -moz-transform: translate3d(0,8px,0); }}

@-o-keyframes float{ 0% { -o-transform: translate3d(0,0,0); } 50% { -o-transform: translate3d(0,8px,0); }}

@keyframes float{ 0% {-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0); } 50% {-webkit-transform: translate3d(0,8px,0);-moz-transform: translate3d(0,8px,0);-ms-transform: translate3d(0,8px,0);transform: translate3d(0,8px,0); };

}

.click-me {

width: 76px;

height: 26px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -38px;

margin-top: 55px;

line-height: 26px;

color: #fff;

font-size: 10px;

font-weight: 700;

letter-spacing: 1px;

text-transform: uppercase;

text-align: center;

background-color: #424950;

border-radius: 3px;

-webkit-animation: float 1s infinite;

-moz-animation: float 1s infinite;

-o-animation: float 1s infinite;

animation: float 1s infinite;

cursor: pointer;

-webkit-transition: 300ms ease;

-moz-transition: 300ms ease;

-o-transition: 300ms ease;

transition: 300ms ease;

}

.click-me:after {

width: 20px;

height: 20px;

content: " ";

position: absolute;

top: 50%;

left: 50%;

margin-left: -10px;

margin-top: -15px;

border-radius: 2px;

z-index: -1;

background-color: #424950;

-webkit-transform: rotateZ(45deg);

-moz-transform: rotateZ(45deg);

-o-transform: rotateZ(45deg);

-ms-transform: rotateZ(45deg);

transform: rotateZ(45deg);

}

.click-me.hide {

opacity: 0;

}

/* End: CSS for CodePen layout only */

/* Start: Key */

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes jump{ 0%,20%,53%,80%,100% { transition-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); -webkit-transform: translate3d(0,0,0); } 40%,43%{ transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -webkit-transform: translate3d(0,-16px,0) rotateZ(8deg); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -webkit-transform: translate3d(0,-6px,0) rotateZ(-2deg); } 90% { -webkit-transform: translate3d(0,-3px,0) rotateZ(2deg); }}

@-moz-keyframes jump{ 0%,20%,53%,80%,100% { transition-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); -moz-transform: translate3d(0,0,0); } 40%,43%{ transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -moz-transform: translate3d(0,-16px,0) rotateZ(8deg); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -moz-transform: translate3d(0,-6px,0) rotateZ(-2deg); } 90% { -moz-transform: translate3d(0,-3px,0) rotateZ(2deg); }}

@-o-keyframes jump{ 0%,20%,53%,80%,100% { transition-timing-function: cubic-bezier(0.215,0.610,0.355,1.000); -o-transform: translate3d(0,0,0); } 40%,43%{ transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -o-transform: translate3d(0,-16px,0) rotateZ(8deg); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060); -o-transform: translate3d(0,-6px,0) rotateZ(-2deg); } 90% { -o-transform: translate3d(0,-3px,0) rotateZ(2deg); }}

@keyframes jump{ 0%,20%,53%,80%,100% { transition-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0); } 40%,43%{ transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform: translate3d(0,-16px,0) rotateZ(8deg);-moz-transform: translate3d(0,-16px,0) rotateZ(8deg);-ms-transform: translate3d(0,-16px,0) rotateZ(8deg);transform: translate3d(0,-16px,0) rotateZ(8deg); } 70% { transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);-webkit-transform: translate3d(0,-6px,0) rotateZ(-2deg);-moz-transform: translate3d(0,-6px,0) rotateZ(-2deg);-ms-transform: translate3d(0,-6px,0) rotateZ(-2deg);transform: translate3d(0,-6px,0) rotateZ(-2deg); } 90% {-webkit-transform: translate3d(0,-3px,0) rotateZ(2deg);-moz-transform: translate3d(0,-3px,0) rotateZ(2deg);-ms-transform: translate3d(0,-3px,0) rotateZ(2deg);transform: translate3d(0,-3px,0) rotateZ(2deg); };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes reset{ 0% { -webkit-transform: translate3d(0,0,0); } 50% { -webkit-transform: translate3d(0,8px,0); }}

@-moz-keyframes reset{ 0% { -moz-transform: translate3d(0,0,0); } 50% { -moz-transform: translate3d(0,8px,0); }}

@-o-keyframes reset{ 0% { -o-transform: translate3d(0,0,0); } 50% { -o-transform: translate3d(0,8px,0); }}

@keyframes reset{ 0% {-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0); } 50% {-webkit-transform: translate3d(0,8px,0);-moz-transform: translate3d(0,8px,0);-ms-transform: translate3d(0,8px,0);transform: translate3d(0,8px,0); };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes clockRotate{ 0% { -webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg); }}

@-moz-keyframes clockRotate{ 0% { -moz-transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(360deg); }}

@-o-keyframes clockRotate{ 0% { -o-transform: rotateZ(0deg); } 100% { -o-transform: rotateZ(360deg); }}

@keyframes clockRotate{ 0% {-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-ms-transform: rotateZ(0deg);transform: rotateZ(0deg); } 100% {-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);-ms-transform: rotateZ(360deg);transform: rotateZ(360deg); };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowStarD0{ 0% { -webkit-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 10% { opacity: 1; } 20% { opacity: 1; } 40%,100% { -webkit-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@-moz-keyframes glowStarD0{ 0% { -moz-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 10% { opacity: 1; } 20% { opacity: 1; } 40%,100% { -moz-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@-o-keyframes glowStarD0{ 0% { -o-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 10% { opacity: 1; } 20% { opacity: 1; } 40%,100% { -o-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@keyframes glowStarD0{ 0% {-webkit-transform: rotateZ(0deg) scale3d(.5,.5,1);-moz-transform: rotateZ(0deg) scale3d(.5,.5,1);-ms-transform: rotateZ(0deg) scale3d(.5,.5,1);transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 10% { opacity: 1; } 20% { opacity: 1; } 40%,100% {-webkit-transform: rotateZ(90deg) scale3d(1.2,1.2,1);-moz-transform: rotateZ(90deg) scale3d(1.2,1.2,1);-ms-transform: rotateZ(90deg) scale3d(1.2,1.2,1);transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowStarD1{ 0%,15% { -webkit-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 25% { opacity: 1; } 35% { opacity: 1; } 55%,100% { -webkit-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@-moz-keyframes glowStarD1{ 0%,15% { -moz-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 25% { opacity: 1; } 35% { opacity: 1; } 55%,100% { -moz-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@-o-keyframes glowStarD1{ 0%,15% { -o-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 25% { opacity: 1; } 35% { opacity: 1; } 55%,100% { -o-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@keyframes glowStarD1{ 0%,15% {-webkit-transform: rotateZ(0deg) scale3d(.5,.5,1);-moz-transform: rotateZ(0deg) scale3d(.5,.5,1);-ms-transform: rotateZ(0deg) scale3d(.5,.5,1);transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 25% { opacity: 1; } 35% { opacity: 1; } 55%,100% {-webkit-transform: rotateZ(90deg) scale3d(1.2,1.2,1);-moz-transform: rotateZ(90deg) scale3d(1.2,1.2,1);-ms-transform: rotateZ(90deg) scale3d(1.2,1.2,1);transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowStarD2{ 0%,30% { -webkit-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 40% { opacity: 1; } 50% { opacity: 1; } 70%,100% { -webkit-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@-moz-keyframes glowStarD2{ 0%,30% { -moz-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 40% { opacity: 1; } 50% { opacity: 1; } 70%,100% { -moz-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@-o-keyframes glowStarD2{ 0%,30% { -o-transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 40% { opacity: 1; } 50% { opacity: 1; } 70%,100% { -o-transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; }}

@keyframes glowStarD2{ 0%,30% {-webkit-transform: rotateZ(0deg) scale3d(.5,.5,1);-moz-transform: rotateZ(0deg) scale3d(.5,.5,1);-ms-transform: rotateZ(0deg) scale3d(.5,.5,1);transform: rotateZ(0deg) scale3d(.5,.5,1); opacity: 0; } 40% { opacity: 1; } 50% { opacity: 1; } 70%,100% {-webkit-transform: rotateZ(90deg) scale3d(1.2,1.2,1);-moz-transform: rotateZ(90deg) scale3d(1.2,1.2,1);-ms-transform: rotateZ(90deg) scale3d(1.2,1.2,1);transform: rotateZ(90deg) scale3d(1.2,1.2,1); opacity: 0; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowCircle{ 0% { stroke-dashoffset: -10; } 100% { stroke-dashoffset: 10; }}

@-moz-keyframes glowCircle{ 0% { stroke-dashoffset: -10; } 100% { stroke-dashoffset: 10; }}

@-o-keyframes glowCircle{ 0% { stroke-dashoffset: -10; } 100% { stroke-dashoffset: 10; }}

@keyframes glowCircle{ 0% { stroke-dashoffset: -10; } 100% { stroke-dashoffset: 10; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowLineD0{ 0% { stroke-dashoffset: 40; } 45%,100% { stroke-dashoffset: -40; }}

@-moz-keyframes glowLineD0{ 0% { stroke-dashoffset: 40; } 45%,100% { stroke-dashoffset: -40; }}

@-o-keyframes glowLineD0{ 0% { stroke-dashoffset: 40; } 45%,100% { stroke-dashoffset: -40; }}

@keyframes glowLineD0{ 0% { stroke-dashoffset: 40; } 45%,100% { stroke-dashoffset: -40; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowLineD1{ 0%,5% { stroke-dashoffset: 40; } 50%,100% { stroke-dashoffset: -40; }}

@-moz-keyframes glowLineD1{ 0%,5% { stroke-dashoffset: 40; } 50%,100% { stroke-dashoffset: -40; }}

@-o-keyframes glowLineD1{ 0%,5% { stroke-dashoffset: 40; } 50%,100% { stroke-dashoffset: -40; }}

@keyframes glowLineD1{ 0%,5% { stroke-dashoffset: 40; } 50%,100% { stroke-dashoffset: -40; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowLineD2{ 0%,10% { stroke-dashoffset: 40; } 55%,100% { stroke-dashoffset: -40; }}

@-moz-keyframes glowLineD2{ 0%,10% { stroke-dashoffset: 40; } 55%,100% { stroke-dashoffset: -40; }}

@-o-keyframes glowLineD2{ 0%,10% { stroke-dashoffset: 40; } 55%,100% { stroke-dashoffset: -40; }}

@keyframes glowLineD2{ 0%,10% { stroke-dashoffset: 40; } 55%,100% { stroke-dashoffset: -40; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowLineD3{ 0%,15% { stroke-dashoffset: 40; } 60%,100% { stroke-dashoffset: -40; }}

@-moz-keyframes glowLineD3{ 0%,15% { stroke-dashoffset: 40; } 60%,100% { stroke-dashoffset: -40; }}

@-o-keyframes glowLineD3{ 0%,15% { stroke-dashoffset: 40; } 60%,100% { stroke-dashoffset: -40; }}

@keyframes glowLineD3{ 0%,15% { stroke-dashoffset: 40; } 60%,100% { stroke-dashoffset: -40; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowLineD4{ 0%,20% { stroke-dashoffset: 40; } 65%,100% { stroke-dashoffset: -40; }}

@-moz-keyframes glowLineD4{ 0%,20% { stroke-dashoffset: 40; } 65%,100% { stroke-dashoffset: -40; }}

@-o-keyframes glowLineD4{ 0%,20% { stroke-dashoffset: 40; } 65%,100% { stroke-dashoffset: -40; }}

@keyframes glowLineD4{ 0%,20% { stroke-dashoffset: 40; } 65%,100% { stroke-dashoffset: -40; };

}

lesshat-selector {

-lh-property: 0; }

@-webkit-keyframes glowLineD5{ 0%,25% { stroke-dashoffset: 40; } 70%,100% { stroke-dashoffset: -40; }}

@-moz-keyframes glowLineD5{ 0%,25% { stroke-dashoffset: 40; } 70%,100% { stroke-dashoffset: -40; }}

@-o-keyframes glowLineD5{ 0%,25% { stroke-dashoffset: 40; } 70%,100% { stroke-dashoffset: -40; }}

@keyframes glowLineD5{ 0%,25% { stroke-dashoffset: 40; } 70%,100% { stroke-dashoffset: -40; };

}

.key {

width: 180px;

height: 150px;

}

.key svg {

width: 180px;

height: 150px;

stroke-linecap: round;

stroke-linejoin: round;

}

.key svg .key-body {

-webkit-transform-origin: 80px 78px;

-moz-transform-origin: 80px 78px;

-o-transform-origin: 80px 78px;

-ms-transform-origin: 80px 78px;

transform-origin: 80px 78px;

}

.key svg .key-body .key-border {

fill: #fff;

stroke: #9aa8b1;

stroke-width: 2;

-webkit-transition: all 400ms;

-moz-transition: all 400ms;

-o-transition: all 400ms;

transition: all 400ms;

}

.key svg .key-body .key-highlight {

fill: #e8ebed;

-webkit-transition: all 400ms;

-moz-transition: all 400ms;

-o-transition: all 400ms;

transition: all 400ms;

}

.key svg .key-body .key-darkness {

fill: #e8ebed;

-webkit-transition: all 400ms;

-moz-transition: all 400ms;

-o-transition: all 400ms;

transition: all 400ms;

}

.key svg .data-circle {

opacity: .3;

-webkit-transform-origin: 89.5px 76px;

-moz-transform-origin: 89.5px 76px;

-o-transform-origin: 89.5px 76px;

-ms-transform-origin: 89.5px 76px;

transform-origin: 89.5px 76px;

-webkit-transition: all 800ms;

-moz-transition: all 800ms;

-o-transition: all 800ms;

transition: all 800ms;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

-webkit-animation: clockRotate 18s linear 0 infinite reverse;

-moz-animation: clockRotate 18s linear 0 infinite reverse;

-o-animation: clockRotate 18s linear 0 infinite reverse;

animation: clockRotate 18s linear 0 infinite reverse;

}

.key svg .data-circle path {

fill: none;

}

.key svg .data-circle text {

font-size: 9px;

font-weight: 700;

fill: #89949b;

letter-spacing: 1px;

}

.key svg .data-circle.inner {

-webkit-animation-direction: normal;

-moz-animation-direction: normal;

-o-animation-direction: normal;

animation-direction: normal;

-webkit-animation-duration: 20s;

-moz-animation-duration: 20s;

-o-animation-duration: 20s;

animation-duration: 20s;

}

.key svg .data-circle.inner text {

font-size: 8.1px;

}

.key svg .glow-circle {

opacity: 0;

fill: none;

stroke: #CB9916;

stroke-width: 3;

stroke-dasharray: 30,14,0.1,14;

-webkit-transition: all 400ms;

-moz-transition: all 400ms;

-o-transition: all 400ms;

transition: all 400ms;

-webkit-animation: glowCircle 3s ease-in-out 0 infinite alternate;

-moz-animation: glowCircle 3s ease-in-out 0 infinite alternate;

-o-animation: glowCircle 3s ease-in-out 0 infinite alternate;

animation: glowCircle 3s ease-in-out 0 infinite alternate;

}

.key svg .glow-lines {

opacity: 0;

-webkit-transition: all 400ms;

-moz-transition: all 400ms;

-o-transition: all 400ms;

transition: all 400ms;

}

.key svg .glow-lines line {

stroke: #CB9916;

stroke-width: 3;

stroke-dasharray: 40 100;

stroke-dashoffset: 40;

-webkit-animation: glowLineD0 2s linear 0 infinite;

-moz-animation: glowLineD0 2s linear 0 infinite;

-o-animation: glowLineD0 2s linear 0 infinite;

animation: glowLineD0 2s linear 0 infinite;

-webkit-animation-play-state: paused;

-moz-animation-play-state: paused;

-o-animation-play-state: paused;

animation-play-state: paused;

}

.key svg .glow-lines line:nth-child(1) {

-webkit-animation-name: glowLineD0;

-moz-animation-name: glowLineD0;

-o-animation-name: glowLineD0;

animation-name: glowLineD0;

}

.key svg .glow-lines line:nth-child(2) {

-webkit-animation-name: glowLineD3;

-moz-animation-name: glowLineD3;

-o-animation-name: glowLineD3;

animation-name: glowLineD3;

}

.key svg .glow-lines line:nth-child(3) {

-webkit-animation-name: glowLineD1;

-moz-animation-name: glowLineD1;

-o-animation-name: glowLineD1;

animation-name: glowLineD1;

}

.key svg .glow-lines line:nth-child(4) {

-webkit-animation-name: glowLineD4;

-moz-animation-name: glowLineD4;

-o-animation-name: glowLineD4;

animation-name: glowLineD4;

}

.key svg .glow-lines line:nth-child(5) {

-webkit-animation-name: glowLineD2;

-moz-animation-name: glowLineD2;

-o-animation-name: glowLineD2;

animation-name: glowLineD2;

}

.key svg .glow-lines line:nth-child(6) {

-webkit-animation-name: glowLineD5;

-moz-animation-name: glowLineD5;

-o-animation-name: glowLineD5;

animation-name: glowLineD5;

}

.key svg .stars {

opacity: 0;

-webkit-transition: all 400ms;

-moz-transition: all 400ms;

-o-transition: all 400ms;

transition: all 400ms;

}

.key svg .stars path {

fill: #fff;

stroke: #CB9916;

stroke-width: 2;

-webkit-animation: glowStarD0 2s linear 0.9s infinite;

-moz-animation: glowStarD0 2s linear 0.9s infinite;

-o-animation: glowStarD0 2s linear 0.9s infinite;

animation: glowStarD0 2s linear 0.9s infinite;

-webkit-animation-play-state: paused;

-moz-animation-play-state: paused;

-o-animation-play-state: paused;

animation-play-state: paused;

-webkit-transform: rotateZ(0deg) scale3d(0.5, 0.5, 1);

-moz-transform: rotateZ(0deg) scale3d(0.5, 0.5, 1);

-o-transform: rotateZ(0deg) scale3d(0.5, 0.5, 1);

-ms-transform: rotateZ(0deg) scale3d(0.5, 0.5, 1);

transform: rotateZ(0deg) scale3d(0.5, 0.5, 1);

-webkit-transform-origin: 50% 50%;

-moz-transform-origin: 50% 50%;

-o-transform-origin: 50% 50%;

-ms-transform-origin: 50% 50%;

transform-origin: 50% 50%;

opacity: 0;

}

.key svg .stars path:nth-child(1) {

-webkit-animation-name: glowStarD0;

-moz-animation-name: glowStarD0;

-o-animation-name: glowStarD0;

animation-name: glowStarD0;

}

.key svg .stars path:nth-child(2) {

-webkit-animation-name: glowStarD1;

-moz-animation-name: glowStarD1;

-o-animation-name: glowStarD1;

animation-name: glowStarD1;

}

.key svg .stars path:nth-child(3) {

-webkit-animation-name: glowStarD2;

-moz-animation-name: glowStarD2;

-o-animation-name: glowStarD2;

animation-name: glowStarD2;

}

.key.on svg .key-body {

-webkit-animation: jump 0.7s;

-moz-animation: jump 0.7s;

-o-animation: jump 0.7s;

animation: jump 0.7s;

}

.key.on svg .key-body .key-border {

fill: #FFD055;

stroke: #CB9916;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.key.on svg .key-body .key-highlight {

fill: #FFE155;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.key.on svg .key-body .key-darkness {

fill: #F1BF3C;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.key.on svg .data-circle {

opacity: 0;

-webkit-transition-duration: 400ms;

-moz-transition-duration: 400ms;

-o-transition-duration: 400ms;

transition-duration: 400ms;

-webkit-transition-delay: 0;

-moz-transition-delay: 0;

-o-transition-delay: 0;

transition-delay: 0;

}

.key.on svg .glow-circle {

opacity: .15;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.key.on svg .glow-lines {

opacity: .15;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.key.on svg .glow-lines line {

-webkit-animation-play-state: running;

-moz-animation-play-state: running;

-o-animation-play-state: running;

animation-play-state: running;

}

.key.on svg .stars {

opacity: 1;

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.key.on svg .stars path {

-webkit-animation-play-state: running;

-moz-animation-play-state: running;

-o-animation-play-state: running;

animation-play-state: running;

}

.key.off svg .key-body {

-webkit-animation: reset 0.4s;

-moz-animation: reset 0.4s;

-o-animation: reset 0.4s;

animation: reset 0.4s;

}

/* End: Key */