3D Loading Animation

Developer

Size

8,482 Kb

Views

22,264

3D Loading Animation Previews
3D Loading Animation HTML Codes
3D Loading Animation CSS Codes
3D Loading Animation JS Codes

How do I make an 3d loading animation?

Collection of 100 3D cubes that animate together to create this cool effect, this can be quite CPU intensive as i am currently changing heights of the cubes, Yheaaa..... this need to be addresses to improve performance!. What is a 3d loading animation? How do you make a 3d loading animation? This script and codes were developed by Mario Duarte on 04 August 2022, Thursday.

3D Loading Animation Previews

3D Loading Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Loading Animation</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="inner">	<figure class="top top1">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top2">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top3">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top4">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top5">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top6">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top7">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top8">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top9">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top10">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top11">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top12">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top13">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top14">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top15">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top16">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top17">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top18">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top19">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top20">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top21">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top22">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top23">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top24">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top25">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top26">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top27">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top28">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top29">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top30">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top31">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top32">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top33">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top34">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top35">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top36">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top37">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top38">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top39">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top40">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top41">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top42">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top43">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top44">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top45">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top46">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top47">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top48">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top49">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top50">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top51">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top52">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top53">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top54">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top55">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top56">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top57">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top58">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top59">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top60">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top61">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top62">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top63">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top64">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top65">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top66">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top67">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top68">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top69">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top70">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top71">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top72">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top73">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top74">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top75">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top76">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top77">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top78">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top79">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top80">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top81">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top82">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top83">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top84">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top85">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top86">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top87">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top88">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top89">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top90">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top91">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top92">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top93">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top94">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top95">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top96">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top97">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top98">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top99">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	<figure class="top top100">	<figure class="cube-face cubeface1"></figure>	<figure class="cube-face cubeface2"></figure>	<figure class="cube-face cubeface3"></figure>	<figure class="cube-face cubeface4"></figure>	<figure class="cube-face cubeface5"></figure>	</figure>	</div>
</div> <script src="js/index.js"></script>
</body>
</html>

3D Loading Animation - Script Codes CSS Codes

@-webkit-keyframes rotateScene { 0% { -webkit-transform: rotateY(0deg) rotateX(70deg); transform: rotateY(0deg) rotateX(70deg); } 100% { -webkit-transform: rotateY(360deg) rotateX(70deg); transform: rotateY(360deg) rotateX(70deg); }
}
@keyframes rotateScene { 0% { -webkit-transform: rotateY(0deg) rotateX(70deg); transform: rotateY(0deg) rotateX(70deg); } 100% { -webkit-transform: rotateY(360deg) rotateX(70deg); transform: rotateY(360deg) rotateX(70deg); }
}
@-webkit-keyframes animateTop { 0% { transform: rotateY(0deg) translateZ(25px); -webkit-transform: rotateY(0deg) translateZ(25px); -moz-transform: rotateY(0deg) translateZ(25px); -ms-trasform: rotateY(0deg) translateZ(25px); } 50% { transform: rotateY(0deg) translateZ(0); -webkit-transform: rotateY(0deg) translateZ(0); -moz-transform: rotateY(0deg) translateZ(0); -ms-trasform: rotateY(0deg) translateZ(0); } 100% { transform: rotateY(0deg) translateZ(25px); -webkit-transform: rotateY(0deg) translateZ(25px); -moz-transform: rotateY(0deg) translateZ(25px); -ms-trasform: rotateY(0deg) translateZ(25px); }
}
@keyframes animateTop { 0% { transform: rotateY(0deg) translateZ(25px); -webkit-transform: rotateY(0deg) translateZ(25px); -moz-transform: rotateY(0deg) translateZ(25px); -ms-trasform: rotateY(0deg) translateZ(25px); } 50% { transform: rotateY(0deg) translateZ(0); -webkit-transform: rotateY(0deg) translateZ(0); -moz-transform: rotateY(0deg) translateZ(0); -ms-trasform: rotateY(0deg) translateZ(0); } 100% { transform: rotateY(0deg) translateZ(25px); -webkit-transform: rotateY(0deg) translateZ(25px); -moz-transform: rotateY(0deg) translateZ(25px); -ms-trasform: rotateY(0deg) translateZ(25px); }
}
@-webkit-keyframes animateFaceTwo { 0% { transform: rotateX(-90deg) translateZ(-25px); -webkit-transform: rotateX(-90deg) translateZ(-25px); -moz-transform: rotateX(-90deg) translateZ(-25px); -ms-trasform: rotateX(-90deg) translateZ(-25px); height: 50px; } 50% { transform: rotateX(-90deg) translateZ(0px); -webkit-transform: rotateX(-90deg) translateZ(0px); -moz-transform: rotateX(-90deg) translateZ(0px); -ms-trasform: rotateX(-90deg) translateZ(0px); height: 0; } 100% { transform: rotateX(-90deg) translateZ(-25px); -webkit-transform: rotateX(-90deg) translateZ(-25px); -moz-transform: rotateX(-90deg) translateZ(-25px); -ms-trasform: rotateX(-90deg) translateZ(-25px); height: 50px; }
}
@keyframes animateFaceTwo { 0% { transform: rotateX(-90deg) translateZ(-25px); -webkit-transform: rotateX(-90deg) translateZ(-25px); -moz-transform: rotateX(-90deg) translateZ(-25px); -ms-trasform: rotateX(-90deg) translateZ(-25px); height: 50px; } 50% { transform: rotateX(-90deg) translateZ(0px); -webkit-transform: rotateX(-90deg) translateZ(0px); -moz-transform: rotateX(-90deg) translateZ(0px); -ms-trasform: rotateX(-90deg) translateZ(0px); height: 0; } 100% { transform: rotateX(-90deg) translateZ(-25px); -webkit-transform: rotateX(-90deg) translateZ(-25px); -moz-transform: rotateX(-90deg) translateZ(-25px); -ms-trasform: rotateX(-90deg) translateZ(-25px); height: 50px; }
}
@-webkit-keyframes animateFaceThree { 0% { transform: rotateY(90deg) translateZ(25px); -webkit-transform: rotateY(90deg) translateZ(25px); -moz-transform: rotateY(90deg) translateZ(25px); -ms-trasform: rotateY(90deg) translateZ(25px); width: 50px; } 50% { transform: rotateY(90deg) translateZ(50px); -webkit-transform: rotateY(90deg) translateZ(50px); -moz-transform: rotateY(90deg) translateZ(50px); -ms-trasform: rotateY(90deg) translateZ(50px); width: 0; } 100% { transform: rotateY(90deg) translateZ(25px); -webkit-transform: rotateY(90deg) translateZ(25px); -moz-transform: rotateY(90deg) translateZ(25px); -ms-trasform: rotateY(90deg) translateZ(25px); width: 50px; }
}
@keyframes animateFaceThree { 0% { transform: rotateY(90deg) translateZ(25px); -webkit-transform: rotateY(90deg) translateZ(25px); -moz-transform: rotateY(90deg) translateZ(25px); -ms-trasform: rotateY(90deg) translateZ(25px); width: 50px; } 50% { transform: rotateY(90deg) translateZ(50px); -webkit-transform: rotateY(90deg) translateZ(50px); -moz-transform: rotateY(90deg) translateZ(50px); -ms-trasform: rotateY(90deg) translateZ(50px); width: 0; } 100% { transform: rotateY(90deg) translateZ(25px); -webkit-transform: rotateY(90deg) translateZ(25px); -moz-transform: rotateY(90deg) translateZ(25px); -ms-trasform: rotateY(90deg) translateZ(25px); width: 50px; }
}
@-webkit-keyframes animateFaceFour { 0% { transform: rotateY(-90deg) translateZ(25px); -webkit-transform: rotateY(-90deg) translateZ(25px); -moz-transform: rotateY(-90deg) translateZ(25px); -ms-trasform: rotateY(-90deg) translateZ(25px); width: 50px; } 50% { transform: rotateY(-90deg) translateZ(0px); -webkit-transform: rotateY(-90deg) translateZ(0px); -moz-transform: rotateY(-90deg) translateZ(0px); -ms-trasform: rotateY(-90deg) translateZ(0px); width: 0; } 100% { transform: rotateY(-90deg) translateZ(25px); -webkit-transform: rotateY(-90deg) translateZ(25px); -moz-transform: rotateY(-90deg) translateZ(25px); -ms-trasform: rotateY(-90deg) translateZ(25px); width: 50px; }
}
@keyframes animateFaceFour { 0% { transform: rotateY(-90deg) translateZ(25px); -webkit-transform: rotateY(-90deg) translateZ(25px); -moz-transform: rotateY(-90deg) translateZ(25px); -ms-trasform: rotateY(-90deg) translateZ(25px); width: 50px; } 50% { transform: rotateY(-90deg) translateZ(0px); -webkit-transform: rotateY(-90deg) translateZ(0px); -moz-transform: rotateY(-90deg) translateZ(0px); -ms-trasform: rotateY(-90deg) translateZ(0px); width: 0; } 100% { transform: rotateY(-90deg) translateZ(25px); -webkit-transform: rotateY(-90deg) translateZ(25px); -moz-transform: rotateY(-90deg) translateZ(25px); -ms-trasform: rotateY(-90deg) translateZ(25px); width: 50px; }
}
@-webkit-keyframes animateFaceFive { 0% { transform: rotateX(-90deg) translateZ(25px); -webkit-transform: rotateX(-90deg) translateZ(25px); -moz-transform: rotateX(-90deg) translateZ(25px); -ms-trasform: rotateX(-90deg) translateZ(25px); height: 50px; } 50% { transform: rotateX(-90deg) translateZ(50px); -webkit-transform: rotateX(-90deg) translateZ(50px); -moz-transform: rotateX(-90deg) translateZ(50px); -ms-trasform: rotateX(-90deg) translateZ(50px); height: 0; } 100% { transform: rotateX(-90deg) translateZ(25px); -webkit-transform: rotateX(-90deg) translateZ(25px); -moz-transform: rotateX(-90deg) translateZ(25px); -ms-trasform: rotateX(-90deg) translateZ(25px); height: 50px; }
}
@keyframes animateFaceFive { 0% { transform: rotateX(-90deg) translateZ(25px); -webkit-transform: rotateX(-90deg) translateZ(25px); -moz-transform: rotateX(-90deg) translateZ(25px); -ms-trasform: rotateX(-90deg) translateZ(25px); height: 50px; } 50% { transform: rotateX(-90deg) translateZ(50px); -webkit-transform: rotateX(-90deg) translateZ(50px); -moz-transform: rotateX(-90deg) translateZ(50px); -ms-trasform: rotateX(-90deg) translateZ(50px); height: 0; } 100% { transform: rotateX(-90deg) translateZ(25px); -webkit-transform: rotateX(-90deg) translateZ(25px); -moz-transform: rotateX(-90deg) translateZ(25px); -ms-trasform: rotateX(-90deg) translateZ(25px); height: 50px; }
}
@-webkit-keyframes animateHeight { 0% { height: 0; transform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); -webkit-transform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); -moz-transform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); -ms-trasform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); } 50% { height: 50px; transform: rotateX(90deg) translateY(25px) translateZ(0) translateX(-10px); -webkit-transform: rotateX(90deg) translateY(25px) translateZ(0) translateX(-10px); -moz-transform: rotateX(90deg) translateY(25px) translateZ(0) translateX(-10px); -ms-trasform: rotateX(90deg) translateY(25px) translateZ(0) translateX(-10px); } 100% { height: 0; transform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); -webkit-transform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); -moz-transform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); -ms-trasform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); }
}
@keyframes animateHeight { 0% { height: 0; transform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); -webkit-transform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); -moz-transform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); -ms-trasform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); } 50% { height: 50px; transform: rotateX(90deg) translateY(25px) translateZ(0) translateX(-10px); -webkit-transform: rotateX(90deg) translateY(25px) translateZ(0) translateX(-10px); -moz-transform: rotateX(90deg) translateY(25px) translateZ(0) translateX(-10px); -ms-trasform: rotateX(90deg) translateY(25px) translateZ(0) translateX(-10px); } 100% { height: 0; transform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); -webkit-transform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); -moz-transform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); -ms-trasform: rotateX(90deg) translateY(0) translateZ(-25px) translateX(-10px); }
}
body { margin: 0; padding: 0 20px; font-family: 'helvetica', sans-serif; height: 100%; background-color: #eeeeee; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-trasform: translate3d(0, 0, 0);
}
.container { width: 500px; height: 500px; margin: 100px auto 0 auto; position: relative; -webkit-perspective: 1000px; perspective: 1000px;
}
.container .inner { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: rotateY(0deg) rotateX(40deg) rotateZ(45deg); -webkit-transform: rotateY(0deg) rotateX(40deg) rotateZ(45deg); -moz-transform: rotateY(0deg) rotateX(40deg) rotateZ(45deg); -ms-trasform: rotateY(0deg) rotateX(40deg) rotateZ(45deg);
}
.container .inner figure.top1 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 0; left: 0;
}
.container .inner figure.top1 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top1 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top1 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top1 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top1 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top2 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 0; left: 50px;
}
.container .inner figure.top2 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top2 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top2 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top2 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top2 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top3 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 0; left: 100px;
}
.container .inner figure.top3 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top3 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top3 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top3 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top3 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top4 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 0; left: 150px;
}
.container .inner figure.top4 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top4 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top4 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top4 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top4 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top5 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 0; left: 200px;
}
.container .inner figure.top5 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top5 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top5 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top5 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top5 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top6 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 0; left: 250px;
}
.container .inner figure.top6 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top6 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top6 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top6 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top6 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top7 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 0; left: 300px;
}
.container .inner figure.top7 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top7 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top7 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top7 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top7 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top8 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 0; left: 350px;
}
.container .inner figure.top8 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top8 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top8 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top8 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top8 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top9 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 0; left: 400px;
}
.container .inner figure.top9 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top9 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top9 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top9 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top9 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top10 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 0; left: 450px;
}
.container .inner figure.top10 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top10 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top10 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top10 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top10 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top11 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 50px; left: 0;
}
.container .inner figure.top11 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top11 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top11 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top11 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top11 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top12 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 50px; left: 50px;
}
.container .inner figure.top12 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top12 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top12 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top12 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top12 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top13 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 50px; left: 100px;
}
.container .inner figure.top13 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top13 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top13 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top13 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top13 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top14 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 50px; left: 150px;
}
.container .inner figure.top14 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top14 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top14 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top14 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top14 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top15 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 50px; left: 200px;
}
.container .inner figure.top15 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top15 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top15 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top15 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top15 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top16 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 50px; left: 250px;
}
.container .inner figure.top16 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top16 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top16 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top16 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top16 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top17 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 50px; left: 300px;
}
.container .inner figure.top17 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top17 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top17 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top17 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top17 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top18 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 50px; left: 350px;
}
.container .inner figure.top18 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top18 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top18 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top18 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top18 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top19 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 50px; left: 400px;
}
.container .inner figure.top19 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top19 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top19 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top19 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top19 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top20 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 50px; left: 450px;
}
.container .inner figure.top20 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top20 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top20 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top20 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top20 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top21 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 100px; left: 0;
}
.container .inner figure.top21 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top21 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top21 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top21 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top21 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top22 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 100px; left: 50px;
}
.container .inner figure.top22 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top22 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top22 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top22 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top22 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top23 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 100px; left: 100px;
}
.container .inner figure.top23 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top23 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top23 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top23 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top23 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top24 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 100px; left: 150px;
}
.container .inner figure.top24 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top24 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top24 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top24 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top24 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top25 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 100px; left: 200px;
}
.container .inner figure.top25 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top25 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top25 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top25 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top25 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top26 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 100px; left: 250px;
}
.container .inner figure.top26 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top26 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top26 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top26 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top26 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top27 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 100px; left: 300px;
}
.container .inner figure.top27 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top27 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top27 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top27 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top27 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top28 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 100px; left: 350px;
}
.container .inner figure.top28 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top28 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top28 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top28 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top28 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top29 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 100px; left: 400px;
}
.container .inner figure.top29 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top29 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top29 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top29 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top29 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top30 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 100px; left: 450px;
}
.container .inner figure.top30 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top30 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top30 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top30 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top30 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top31 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 150px; left: 0;
}
.container .inner figure.top31 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top31 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top31 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top31 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top31 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top32 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 150px; left: 50px;
}
.container .inner figure.top32 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top32 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top32 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top32 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top32 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top33 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 150px; left: 100px;
}
.container .inner figure.top33 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top33 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top33 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top33 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top33 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top34 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 150px; left: 150px;
}
.container .inner figure.top34 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.4s infinite forwards; animation: animateTop 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top34 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top34 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top34 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top34 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top35 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 150px; left: 200px;
}
.container .inner figure.top35 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.4s infinite forwards; animation: animateTop 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top35 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top35 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top35 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top35 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top36 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 150px; left: 250px;
}
.container .inner figure.top36 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.4s infinite forwards; animation: animateTop 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top36 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top36 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top36 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top36 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top37 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 150px; left: 300px;
}
.container .inner figure.top37 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.4s infinite forwards; animation: animateTop 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top37 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top37 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top37 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top37 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top38 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 150px; left: 350px;
}
.container .inner figure.top38 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top38 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top38 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top38 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top38 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top39 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 150px; left: 400px;
}
.container .inner figure.top39 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top39 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top39 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top39 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top39 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top40 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 150px; left: 450px;
}
.container .inner figure.top40 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top40 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top40 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top40 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top40 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top41 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 200px; left: 0;
}
.container .inner figure.top41 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top41 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top41 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top41 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top41 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top42 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 200px; left: 50px;
}
.container .inner figure.top42 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top42 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top42 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top42 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top42 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top43 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 200px; left: 100px;
}
.container .inner figure.top43 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top43 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top43 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top43 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top43 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top44 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 200px; left: 150px;
}
.container .inner figure.top44 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.4s infinite forwards; animation: animateTop 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top44 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top44 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top44 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top44 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top45 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 200px; left: 200px;
}
.container .inner figure.top45 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0s infinite forwards; animation: animateTop 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top45 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top45 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0s infinite forwards; animation: animateFaceThree 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top45 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0s infinite forwards; animation: animateFaceFour 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top45 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0s infinite forwards; animation: animateFaceFive 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top46 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 200px; left: 250px;
}
.container .inner figure.top46 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0s infinite forwards; animation: animateTop 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top46 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top46 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0s infinite forwards; animation: animateFaceThree 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top46 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0s infinite forwards; animation: animateFaceFour 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top46 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0s infinite forwards; animation: animateFaceFive 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top47 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 200px; left: 300px;
}
.container .inner figure.top47 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.4s infinite forwards; animation: animateTop 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top47 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top47 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top47 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top47 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top48 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 200px; left: 350px;
}
.container .inner figure.top48 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top48 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top48 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top48 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top48 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top49 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 200px; left: 400px;
}
.container .inner figure.top49 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top49 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top49 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top49 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top49 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top50 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 200px; left: 450px;
}
.container .inner figure.top50 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top50 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top50 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top50 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top50 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top51 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 250px; left: 0;
}
.container .inner figure.top51 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top51 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top51 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top51 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top51 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top52 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 250px; left: 50px;
}
.container .inner figure.top52 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top52 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top52 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top52 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top52 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top53 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 250px; left: 100px;
}
.container .inner figure.top53 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top53 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top53 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top53 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top53 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top54 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 250px; left: 150px;
}
.container .inner figure.top54 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.4s infinite forwards; animation: animateTop 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top54 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top54 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top54 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top54 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top55 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 250px; left: 200px;
}
.container .inner figure.top55 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0s infinite forwards; animation: animateTop 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top55 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top55 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0s infinite forwards; animation: animateFaceThree 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top55 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0s infinite forwards; animation: animateFaceFour 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top55 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0s infinite forwards; animation: animateFaceFive 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top56 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 250px; left: 250px;
}
.container .inner figure.top56 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0s infinite forwards; animation: animateTop 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top56 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top56 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0s infinite forwards; animation: animateFaceThree 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top56 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0s infinite forwards; animation: animateFaceFour 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top56 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0s infinite forwards; animation: animateFaceFive 2s ease-in-out 0s infinite forwards;
}
.container .inner figure.top57 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 250px; left: 300px;
}
.container .inner figure.top57 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.4s infinite forwards; animation: animateTop 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top57 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top57 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top57 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top57 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top58 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 250px; left: 350px;
}
.container .inner figure.top58 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top58 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top58 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top58 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top58 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top59 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 250px; left: 400px;
}
.container .inner figure.top59 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top59 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top59 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top59 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top59 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top60 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 250px; left: 450px;
}
.container .inner figure.top60 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top60 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top60 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top60 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top60 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top61 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 300px; left: 0;
}
.container .inner figure.top61 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top61 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top61 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top61 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top61 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top62 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 300px; left: 50px;
}
.container .inner figure.top62 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top62 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top62 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top62 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top62 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top63 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 300px; left: 100px;
}
.container .inner figure.top63 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top63 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top63 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top63 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top63 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top64 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 300px; left: 150px;
}
.container .inner figure.top64 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.4s infinite forwards; animation: animateTop 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top64 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top64 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top64 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top64 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top65 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 300px; left: 200px;
}
.container .inner figure.top65 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.4s infinite forwards; animation: animateTop 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top65 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top65 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top65 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top65 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top66 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 300px; left: 250px;
}
.container .inner figure.top66 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.4s infinite forwards; animation: animateTop 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top66 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top66 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top66 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top66 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top67 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 300px; left: 300px;
}
.container .inner figure.top67 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.4s infinite forwards; animation: animateTop 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top67 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top67 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top67 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top67 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.4s infinite forwards;
}
.container .inner figure.top68 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 300px; left: 350px;
}
.container .inner figure.top68 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top68 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top68 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top68 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top68 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top69 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 300px; left: 400px;
}
.container .inner figure.top69 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top69 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top69 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top69 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top69 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top70 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 300px; left: 450px;
}
.container .inner figure.top70 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top70 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top70 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top70 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top70 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top71 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 350px; left: 0;
}
.container .inner figure.top71 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top71 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top71 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top71 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top71 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top72 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 350px; left: 50px;
}
.container .inner figure.top72 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top72 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top72 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top72 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top72 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top73 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 350px; left: 100px;
}
.container .inner figure.top73 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top73 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top73 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top73 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top73 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top74 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 350px; left: 150px;
}
.container .inner figure.top74 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top74 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top74 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top74 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top74 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top75 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 350px; left: 200px;
}
.container .inner figure.top75 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top75 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top75 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top75 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top75 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top76 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 350px; left: 250px;
}
.container .inner figure.top76 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top76 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top76 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top76 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top76 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top77 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 350px; left: 300px;
}
.container .inner figure.top77 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top77 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top77 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top77 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top77 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top78 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 350px; left: 350px;
}
.container .inner figure.top78 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 0.8s infinite forwards; animation: animateTop 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top78 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards; animation: animateFaceTwo 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top78 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards; animation: animateFaceThree 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top78 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFour 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top78 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards; animation: animateFaceFive 2s ease-in-out 0.8s infinite forwards;
}
.container .inner figure.top79 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 350px; left: 400px;
}
.container .inner figure.top79 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top79 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top79 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top79 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top79 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top80 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 350px; left: 450px;
}
.container .inner figure.top80 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top80 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top80 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top80 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top80 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top81 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 400px; left: 0;
}
.container .inner figure.top81 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top81 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top81 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top81 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top81 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top82 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 400px; left: 50px;
}
.container .inner figure.top82 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top82 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top82 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top82 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top82 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top83 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 400px; left: 100px;
}
.container .inner figure.top83 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top83 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top83 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top83 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top83 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top84 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 400px; left: 150px;
}
.container .inner figure.top84 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top84 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top84 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top84 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top84 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top85 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 400px; left: 200px;
}
.container .inner figure.top85 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top85 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top85 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top85 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top85 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top86 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 400px; left: 250px;
}
.container .inner figure.top86 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top86 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top86 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top86 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top86 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top87 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 400px; left: 300px;
}
.container .inner figure.top87 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top87 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top87 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top87 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top87 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top88 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 400px; left: 350px;
}
.container .inner figure.top88 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top88 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top88 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top88 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top88 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top89 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 400px; left: 400px;
}
.container .inner figure.top89 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1s infinite forwards; animation: animateTop 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top89 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top89 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1s infinite forwards; animation: animateFaceThree 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top89 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1s infinite forwards; animation: animateFaceFour 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top89 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1s infinite forwards; animation: animateFaceFive 2s ease-in-out 1s infinite forwards;
}
.container .inner figure.top90 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 400px; left: 450px;
}
.container .inner figure.top90 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top90 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top90 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top90 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top90 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top91 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 450px; left: 0;
}
.container .inner figure.top91 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top91 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top91 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top91 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top91 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top92 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 450px; left: 50px;
}
.container .inner figure.top92 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top92 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top92 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top92 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top92 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top93 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 450px; left: 100px;
}
.container .inner figure.top93 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top93 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top93 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top93 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top93 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top94 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 450px; left: 150px;
}
.container .inner figure.top94 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top94 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top94 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top94 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top94 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top95 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 450px; left: 200px;
}
.container .inner figure.top95 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top95 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top95 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top95 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top95 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top96 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 450px; left: 250px;
}
.container .inner figure.top96 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top96 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top96 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top96 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top96 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top97 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 450px; left: 300px;
}
.container .inner figure.top97 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top97 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top97 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top97 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top97 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top98 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 450px; left: 350px;
}
.container .inner figure.top98 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top98 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top98 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top98 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top98 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top99 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 450px; left: 400px;
}
.container .inner figure.top99 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top99 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top99 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top99 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top99 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top100 { width: 50px; height: 50px; position: absolute; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; top: 450px; left: 450px;
}
.container .inner figure.top100 figure.cube-face.cubeface1 { -webkit-animation: animateTop 2s ease-in-out 1.4s infinite forwards; animation: animateTop 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top100 figure.cube-face.cubeface2 { -webkit-animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards; animation: animateFaceTwo 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top100 figure.cube-face.cubeface3 { -webkit-animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards; animation: animateFaceThree 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top100 figure.cube-face.cubeface4 { -webkit-animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFour 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.top100 figure.cube-face.cubeface5 { -webkit-animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards; animation: animateFaceFive 2s ease-in-out 1.4s infinite forwards;
}
.container .inner figure.cube-face { margin: 0; width: 50px; height: 50px; display: block; position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; contain: layout;
}
.container .inner figure.cube-face.cubeface1 { transform: rotateY(0deg) translateZ(25px); -webkit-transform: rotateY(0deg) translateZ(25px); -moz-transform: rotateY(0deg) translateZ(25px); -ms-trasform: rotateY(0deg) translateZ(25px); background-color: #ffffff;
}
.container .inner figure.cube-face.cubeface2 { transform: rotateX(-90deg) translateZ(-25px); -webkit-transform: rotateX(-90deg) translateZ(-25px); -moz-transform: rotateX(-90deg) translateZ(-25px); -ms-trasform: rotateX(-90deg) translateZ(-25px); background-color: #e1e1e1;
}
.container .inner figure.cube-face.cubeface3 { transform: rotateY(90deg) translateZ(25px); -webkit-transform: rotateY(90deg) translateZ(25px); -moz-transform: rotateY(90deg) translateZ(25px); -ms-trasform: rotateY(90deg) translateZ(25px); background-color: #c8c8c8;
}
.container .inner figure.cube-face.cubeface4 { transform: rotateY(-90deg) translateZ(25px); -webkit-transform: rotateY(-90deg) translateZ(25px); -moz-transform: rotateY(-90deg) translateZ(25px); -ms-trasform: rotateY(-90deg) translateZ(25px); background-color: #c8c8c8;
}
.container .inner figure.cube-face.cubeface5 { transform: rotateX(-90deg) translateZ(25px); -webkit-transform: rotateX(-90deg) translateZ(25px); -moz-transform: rotateX(-90deg) translateZ(25px); -ms-trasform: rotateX(-90deg) translateZ(25px); background-color: #e1e1e1;
}

3D Loading Animation - Script Codes JS Codes

// No JS, not this time!

Home Page	Home
Developer	Mario Duarte
Username	MarioDesigns
Uploaded	August 04, 2022
Rating	3
Size	8,482 Kb
Views	22,264

Do you need developer help for 3D Loading Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mario Duarte (MarioDesigns) Script Codes

Name	Size
Console Simulator	5,442 Kb
Arcade Buttons	3,213 Kb
Image Comparison Slider	7,574 Kb
CodePen Logo Animation	3,917 Kb
Interactive 3D Video Thumbnail	7,015 Kb
3D Cube - Pure CSS	3,010 Kb
JavaScript Lesson - Todo list	6,014 Kb
Floating Particles	13,587 Kb
Hamburger Menu Animation	4,611 Kb
SoundCloud Custom Player	5,746 Kb

Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Hc first draft	Stepfray	5,104 Kb
A Pen by Jason Kinney	Jason-kinney	1,980 Kb
A Pen by Mike Otis	Mikeotis	3,185 Kb
Board Site	IndianaLuft	10,542 Kb
Cake	Kennyname	7,220 Kb
Virtual vinyl	Davidpanik	3,474 Kb
Hard-Stop Gradients	Mackdoyle	2,288 Kb
Click Based Rotation Demo	Zeaklous	2,086 Kb
A Pen by Alexandru Pora	Axpro	1,615 Kb
GrcJS	Vino6	2,047 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!