Pendulum animation

HTML
<div class="image-wrap small"> <div class="background"></div> <div class="bulb1"></div> <div class="bulb2"></div> <div class="bulb3"></div> </div>
CSS
body { background-color: #000; overflow-x: hidden; font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif; } /* Assets */ .image-wrap { position:relative; width:100%; margin:0 auto; overflow:hidden; } .image-wrap.small .background{ background:url(http://www.rudebox.org.ua/demo/effects-live-background-for-website-with-using-css/img/background.jpg) no-repeat; background-size:cover; width:1388px; height:660px; position:relative; } .image-wrap.small .bulb1{ background:url(http://www.rudebox.org.ua/demo/effects-live-background-for-website-with-using-css/img/bulb-1.png) no-repeat center center; background-size:contain; position:absolute; width:272px; height:412px; left:42%; top:0%; z-index: 3; animation: pendulum1 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650); -webkit-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650); transform-origin:center top; } .image-wrap.small .bulb2{ background:url(http://www.rudebox.org.ua/demo/effects-live-background-for-website-with-using-css/img/bulb-2.1.png) no-repeat center center; background-size:contain; position:absolute; z-index: 1; width:144px; height:418px; left:36%; top:21%; z-index: 2; animation: pendulum 9s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650); -webkit-animation: pendulum 9s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650); transform-origin:center top; } .image-wrap.small .bulb3{ background:url(http://www.rudebox.org.ua/demo/effects-live-background-for-website-with-using-css/img/bulb-3.png) no-repeat center center; background-size:contain; position:absolute; width:72px; height:309px; left:32%; top:266px; z-index: 1; animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650); -webkit-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650); transform-origin:center top; } .image-wrap.small .bulb1:hover{ } .image-wrap.small .bulb2:hover{ } .image-wrap.small .bulb3:hover{ } /* Keyframes */ @-webkit-keyframes pendulum { 0%, 100% { transform: rotate(2deg); } 25%, 75% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } pendulum1 { 0%, 100% { transform: rotate(.6deg); } 25%, 75% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } } @keyframes pendulum { 0%, 100% { transform: rotate(2deg); } 25%, 75% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } pendulum1 { 0%, 100% { transform: rotate(.6deg); } 25%, 75% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
JAVASCRIPT
Expand for more options Login