{"id":62,"date":"2018-02-18T18:46:38","date_gmt":"2018-02-18T18:46:38","guid":{"rendered":"http:\/\/thingography.com\/my-things\/?p=62"},"modified":"2025-02-13T21:10:50","modified_gmt":"2025-02-13T21:10:50","slug":"css-bond","status":"publish","type":"post","link":"https:\/\/thingography.com\/css-bond\/","title":{"rendered":"Bond Opening Sequence CSS Animation"},"content":{"rendered":"<style>\n\/*===== Stage One - the Dots ===== *\/\n@font-face {\n\tfont-family: GoldenEye;\t\n\tsrc: url(https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/bond\/GoldenEye.ttf);\n}\n#bond-open {\n\twidth: 100%;\n\theight: 600px;\n\toverflow: hidden;\nbackground-color: #000;\nposition: relative;\nmargin: 0 auto 2em;\nbox-sizing: content-box;\n}\n.dot-box {\nwidth: 80%;\nheight: 100%;\noverflow: hidden;\nposition: relative;\nmargin: 0 auto;\nleft: 7%;\nbox-sizing: content-box;\n}\n.dot0, .dot1, .dot2, .dot3, .dot4, .dot5, .dot6 {\n\tmargin: -50px 0px 0px 0px;\n\tborder-radius: 50%;\n\twidth: 100px;\n\theight: 100px;\n\tbackground-color: #FFFFFF;\n\tposition: absolute;\n\ttop: 80%;\n\topacity:0;\n\tbackground: rgb(245,246,246);\n\tbackground: radial-gradient(ellipse at center, rgba(245,246,246,1) 0%,rgba(234,236,242,1) 23%,rgba(234,236,239,1) 49%,rgba(239,241,244,1) 80%,rgba(245,246,246,1) 100%);\n}\nbox-sizing: content-box;\n.dot0 {\n\tbackground-color: transparent;\n\topacity:0;\n\tanimation:dot0 8s linear;\n}\n.dot1 {\n\tmargin: -50px 0px 0px 54px;\n\tanimation: dot 1s linear;\n\tanimation-delay: 0.7s;\n}\n.dot2 {\n\tmargin: -50px 0px 0px 208px;\n\tanimation: dot 1s linear;\n\tanimation-delay: 1.3s;\n}\n.dot3 {\n\tmargin: -50px 0px 0px 362px;\n\tanimation: dot 1s linear;\n\tanimation-delay: 2s;\n}\n.dot4 {\n\tmargin: -50px 0px 0px 516px;\n\tanimation: dot 1s linear;\n\tanimation-delay: 2.7s;\n}\n.dot5 {\n\tmargin: -50px 0px 0px 670px;\n\tanimation: dot 1s linear;\n\tanimation-delay: 3.3s;\n}\n.dot6 {\n\tmargin: -50px 0px 0px 824px;\n\tanimation: dot 1s linear;\n\tanimation-delay: 4s;\n}\n@keyframes dot0 {\n\t0%  {left:-100px; opacity:1; background-color: #FFFFFF;}\n\t60% {left:1000px; opacity:1; width:100px; height:100px; margin-top: -50px; background-color: #FFFFFF;}\n\t75% {left:1000px; opacity:0; width:100px; height:100px; margin-top: -50px; background-color: #FFFFFF;}\n\t100%{left:1000px; opacity:0; width:400px; height:400px; margin-top:-200px; background-color: transparent;}\n}\n@keyframes dot {\n\t0%   {opacity:1;}\n\t40%  {opacity:1;}\n\t100% {opacity:0;}\n}\n\/* Bond Image *\/\n#bond {\n\tpadding: 60px 95px 60px 115px;\n\tleft: 50%;\n\ttop: 50%;\n\twidth: 90px;\n\theight: 180px;\n\tmargin-top: -150px;\n\tmargin-left: -150px;\n\tposition: absolute;\n\topacity: 0;\n\tborder-radius: 50%;\n\tbackground-color: #FFFFFF;\n\tanimation: bond 20s linear;\n\tanimation-delay: 4.5s;\nbox-sizing: content-box;\n}\n@keyframes bond {\n\t0.00% {opacity: 0;}\n\t5.00% {opacity: 0;}\n\t12.8% {opacity: 0;}\n\t12.9% {opacity: 1;}\n\t14.6% {opacity: 1;}\n\t47.0% {opacity: 1;}\n\t51.0% {opacity: 0;}\n\t100%  {opacity: 0;}\n}\n\/* The Gun barrel *\/\n\/* == The Gun Barrel View ==*\/\n.barrel {\n\ttop: 80%;\n\tleft: 50%;\n\tmargin-top: -600px;\n\tmargin-left: -540px;\n\twidth: 1080px;\n\theight: 1000px;\n\tborder-radius: 50%;\n\tz-index: 10;\n\tposition: absolute;\n\toverflow: hidden;\n\topacity: 0;\n\tbox-shadow: 0 0 150px 150px #333333, 0 0 250px 250px #FFFFFF inset, 0 0 250px 250px #FFFFFF inset;\n\tanimation: barrel 20s linear;\n\tanimation-delay:4.5s;\noverflow: hidden;\nbox-sizing: content-box;\n}\n#bore {\n\twidth: 300px;\n\theight: 300px;\n\tleft: 50%;\n\ttop: 50%;\n\tmargin-top: -150px;\n\tmargin-left: -150px;\n\tborder: 5px solid #000000;\n\tborder-radius: 50%;\n\tposition: absolute;\n\tbackground: none;\n\tbox-shadow: 0 0 350px 350px #444444, 0 0 250px 250px #444444;\nbox-sizing: content-box;\n}\n#bore-cover {\n\twidth: 300px;\n\theight: 300px;\n\tleft: 50%;\n\ttop: 50%;\n\tmargin-top: -150px;\n\tmargin-left: -150px;\n\tborder-radius: 50%;\n\tborder: 5px solid transparent;\n\tposition: absolute;\n\tbackground: none;\n\tanimation: bore-cover 20s linear;\n\tanimation-delay:4.5s;\nbox-sizing: content-box;\n}\n#line1, #line2, #line3, #line4, #line5, #line6, #line7, #line8  {\n\tborder-radius: 30% 0 0 70%;\n\twidth: 500px;\n\theight: 700px;\n\tborder: 8px solid #000;\n\tborder-color: transparent transparent transparent #000;\n\tposition: relative;\nbox-sizing: content-box;\n}\n#line1 {\n\tmargin: 440px 0px 0px 338px;\n\ttransform: rotateZ(0deg);\n}\n#line2 {\n\tmargin: -760px 0px 0px 110px;\n\ttransform: rotateZ(45deg);\n}\n#line3 {\n\tmargin: -915px 0px 0px -10px;\n\ttransform: rotateZ(90deg);\n}\n#line4 {\n\tmargin: -940px 0px 0px 44px;\n\ttransform: rotateZ(135deg);\n}\n#line5 {\n\tmargin: -845px 0px 0px 237px;\n\ttransform: rotateZ(180deg);\n}\n#line6 {\n\tmargin: -679px 0px 0px 480px;\n\ttransform: rotateZ(225deg);\n}\n#line7 {\n\tmargin: -500px 0px 0px 590px;\n\ttransform:rotateZ(270deg);\n}\n#line8 {\n\tmargin: -483px 0px 0px 540px;\n\ttransform: rotateZ(315deg);\n}\n@keyframes barrel {\n\t0%  {margin-left: -120px; margin-top:-498px; transform: scale(0.1); opacity: 0.0; background: transparent;}\n\t5%  {margin-left: -120px; margin-top:-498px; transform: scale(0.1); opacity: 1.0; background: transparent;}\n\t15% {margin-left:-540px; margin-top:-700px; transform: scale(0.7); opacity: 1.0; background: transparent;}\n\t48% {margin-left:-540px; margin-top:-700px; transform: scale(0.7); opacity: 1.0; background: transparent;}\n\t50% {margin-left:-740px; margin-top:-700px; transform: scale(0.7); opacity: 1.0; background: transparent;}\n\t60% {margin-left:-340px; margin-top:-700px; transform: scale(0.5); opacity: 1.0; background: transparent;}\n\t75% {margin-left:-740px; margin-top:-700px; transform: scale(0.5); opacity: 1.0; background: transparent;}\n\t85% {margin-left:-340px; margin-top:   0px; transform: scale(0.5); opacity: 1.0; background: #FFFFFF;}\n\t90% {margin-left:-340px; margin-top:   0px; transform: scale(0.5); opacity: 1.0; background: #FFFFFF;}\n\t100%{margin-left:-540px; margin-top:-700px; transform: scale(0.5); opacity:   0; background: #FFFFFF;}\n}\n@keyframes bore-cover {\n\t0%   {opacity: 0.0; background: #FFFFFF;}\n\t5%   {opacity: 1.0; background: #FFFFFF;}\n\t14.9%{opacity: 1.0; background: #FFFFFF;}\n\t15.0%{opacity: 1.0; background: #FFFFFF;}\n\t45%  {opacity: 0.0; background: transparent;}\n\t48%  {opacity: 1.0; background: #FFFFFF;}\n\t50%  {opacity: 1.0; background: #999999;}\n\t60%  {opacity: 1.0; background: #999999;}\n\t75%  {opacity: 1.0; background: #999999;}\n\t85%  {opacity: 1.0; background: #999999;}\n\t90%  {opacity: 1.0; background: #999999;}\n\t100% {opacity: 0.0; background: #999999;}\n}\n\/* ================ The Red  =============== *\/\n.redfall {\n\tmargin-left: -540px;\n\tmargin-top: -250px;\n\twidth: 1080px;\n\theight: 500px;\n\tbackground-color: #FF0000;\n\tposition: absolute;\n\tleft: 50%;\n\ttop: 0px;\n\tz-index: 20;\n\topacity: 0.0;\n\tpadding-top: 800px;\n\tanimation: red 40s linear;\nbox-sizing: content-box;\n}\n#drop1, #drop2, #drop3, #drop4, #drop5, #drop6, #drop7, #drop8  {\n\tborder-radius: 30% 0 0 70%;\n\twidth: 100px;\n\theight: 200px;\n\tborder-color: transparent transparent transparent #000;\n\tposition: relative;\n\tbackground-color: #FF0000;\n\ttransform: rotateZ(-90deg);\nbox-sizing: content-box;\n}\n#drop1 {\n\tmargin: 400px 0px 0px 50px;\n}\n#drop2 {\n\twidth: 250px;\n\theight: 150px;\n\tborder-radius: 70% 0 0 70%;\n\tmargin: -225px 0px 0px 80px;\n\tanimation: drop2 3s linear 2;\n\tanimation-delay: 6s;\n}\n#drop3 {\n\tmargin: -114px 0px 0px 300px;\n}\n#drop4 {\n\tmargin: -180px 0px 0px 455px;\n\tborder-radius: 70% 0 0 70%;\n\tanimation: drop4 2s linear 3;\n\tanimation-delay: 6s;\n}\n#drop5 {\n\twidth: 100px;\n\theight: 200px;\n\tmargin: -194px 0px 0px 602px;\n\tanimation: drop5 3s linear 2;\n\tanimation-delay: 6s;\n}\n#drop6 {\n\tmargin: -194px 0px 0px 700px;\n\tborder-radius: 70% 0 0 70%;\n\tanimation: drop4 3s linear 2;\n\tanimation-delay: 6s;\n}\n#drop7 {\n\tmargin: -254px 0px 0px 850px;\n\tborder-radius: 70% 0 30% 70%;\n\tanimation: drop2 3s linear 2;\n\tanimation-delay: 6s;\n}\n#drop8 {\n\twidth: 200px;\n\theight: 100px;\n\tmargin: -151px 0px 0px 930px;\n\tborder-radius: 70% 0 0 70%;\n\tanimation: drop2 2s linear 3;\n\tanimation-delay: 6s;\n}\n@keyframes red {\n\t0%   {top:-1200px; opacity:0.6;}\n\t20%  {top:-1200px; opacity:0.6;}\n\t35%  {top:    0px; opacity:0.6;}\n\t100% {top:    0px; opacity:0.6;}\n}\n@keyframes drop2 {\n\t0%   {top:-20px;}\n\t40%  {top: 50px;}\n\t100% {top:-20px;}\n}\n@keyframes drop5 {\n\t0%   {top:0px; transform: rotateZ(-90deg);}\n\t40%  {top:2px; transform: rotateZ(-110deg);}\n\t100% {top:0px; transform: rotateZ(-90deg);}\n}\n@-keyframes drop4 {\n\t0%   {top:-20px;}\n\t40%  {top:  8px;}\n\t100% {top:-20px;}\n}\n\/* ===== 007 Text  ===== *\/\n#seven {\n\tmargin: 0px 0px 0px -170px;\n\tposition: absolute;\n\tleft: 50%;\n\ttop: 50%;\n\topacity: 1;\n\tz-index: 30;\n\tanimation: seven 40s linear;\n\tfont-size: 200px;\n\tcolor: #FFFFFF;\n\ttext-align: center;\n\tfont-family: \"GoldenEye\";\n\twidth: 350px;\nbox-sizing: content-box;\n}\n@keyframes seven {\n  \t0%   {opacity:0;}\n\t60%  {opacity:0;}\n\t65%  {opacity:1;}\n\t95%  {opacity:1;}\n\t100% {opacity:0;}\n}\naudio {height: 40px; width: 250px;}\n<\/style>\n<div class=\"ani-box\">\n<div id=\"bond-open\">\n<p><!-- The Opening Dots  --><\/p>\n<div class=\"dot-box\">\n<div class=\"dot0\"><\/div>\n<div class=\"dot1\"><\/div>\n<div class=\"dot2\"><\/div>\n<div class=\"dot3\"><\/div>\n<div class=\"dot4\"><\/div>\n<div class=\"dot5\"><\/div>\n<div class=\"dot6\"><\/div>\n<\/p><\/div>\n<p> <!-- .Dot-Box --><\/p>\n<p>\t<!-- Bond Image -  --><\/p>\n<div id=\"bond\">\n\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/bond\/bond90.png\" alt=\"bond\" width=\"90\" height=\"180\"\/>\n\t<\/div>\n<p> <!-- Close Bond -->\t<\/p>\n<p><!-- The Gun barrel View  --><\/p>\n<div class=\"barrel\">\n<div id=\"bore\"> <\/div>\n<div id=\"line1\"><\/div>\n<div id=\"line2\"><\/div>\n<div id=\"line3\"><\/div>\n<div id=\"line4\"><\/div>\n<div id=\"line5\"><\/div>\n<div id=\"line6\"><\/div>\n<div id=\"line7\"><\/div>\n<div id=\"line8\"><\/div>\n<div id=\"bore-cover\"><\/div>\n<\/p><\/div>\n<p><!-- The Red Dripping Blood  --><\/p>\n<div class=\"redfall-box\">\n<div class=\"redfall\">\n<div id=\"drop1\"><\/div>\n<div id=\"drop2\"><\/div>\n<div id=\"drop3\"><\/div>\n<div id=\"drop4\"><\/div>\n<div id=\"drop5\"><\/div>\n<div id=\"drop6\"><\/div>\n<div id=\"drop7\"><\/div>\n<div id=\"drop8\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p><!-- The 007 Closing Text  --><\/p>\n<div id=\"seven\">007*<\/div>\n<\/div>\n<p> <!-- #Bond Opening  --><\/p>\n<p><audio id=\"mp3\" loop=\"loop\" autoplay=\"autoplay\" controls=\"controls\"><!-- Will play MP3 in modern browser --><source src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/bond\/bond.mp3\" type=\"audio\/mpeg\"\/><source src=\"https:\/\/thingography.com\/my-things\/wp-content\/uploads\/css-img\/bond\/bond.ogg\" type=\"audio\/ogg\" \/>Your browser does not support the audio element.<\/audio><\/p>\n<\/div>\n<p> <!-- Ani-box --><\/p>\n<p class=\"below-ani\"> For me this was a challenge to make, unfortunately this Bond CSS animation was designed for a desktop screen &#8211; for which it is best viewed. It is predominantly using CSS, only one image was used &#8211; the James Bond figure. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>007* Your browser does not support the audio element. For me this was a challenge to make, unfortunately this Bond CSS animation was designed for a desktop screen &#8211; for which it is best viewed. It is predominantly using CSS,<\/p>\n","protected":false},"author":2,"featured_media":2573,"comment_status":"closed","ping_status":"open","sticky":false,"template":"ani-post-single.php","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[6,10,4,5],"class_list":["post-62","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","tag-animation","tag-bond","tag-css","tag-css-animation"],"_links":{"self":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":1,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/62\/revisions"}],"predecessor-version":[{"id":3826,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/posts\/62\/revisions\/3826"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media\/2573"}],"wp:attachment":[{"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/media?parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/categories?post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thingography.com\/wp-json\/wp\/v2\/tags?post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}