i have little problem lamp animation when rotate keyframe lamp being cut off.
here fiddle , snippet below
@keyframes move { 0% { -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 100% { -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } } @-moz-keyframes move { 0% { -moz-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -moz-transform: rotate(5deg); transform: rotate(5deg); } 100% { -moz-transform: rotate(-4deg); transform: rotate(-4deg); } } @-webkit-keyframes move { 0% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 100% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } } #lamp { top: -35%; left: 0; width: 40%; height: 100%; position: absolute; background: transparent url(../img/lamp.svg) no-repeat center; background-size: 20%; -webkit-transform-origin: center top; transform-origin: center top; -webkit-animation-name: move; -ms-animation-name: move; -moz-animation-name: move; -o-animation-name: move; animation-name: move; -webkit-animation-duration: 5s; -ms-animation-duration: 5s; -moz-animation-duration: 5s; -o-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; }<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="125.9px" height="647.7px" viewbox="0 0 125.9 647.7" enable-background="new 0 0 125.9 647.7" xml:space="preserve"> <g id="lamp"> <path fill="#024264" d="m59.8,0h6.5v460.4h-6.5v0z" /> <path fill="#fec13f" d="m12.7,546.9c4.7,557.4,0,570.6,0,584.8c0,34.8,28.2,62.9,62.9,62.9c34.8,0,63-28.2,63-62.9 c0-14.2-4.7-27.4-12.7-37.9c0,0-10.4-13.1-8.7-31c1.7-18-9.1-25.5-16.2-25.5h37.7c-7.2,0-17.9,7.5-16.2,25.5 c23.1,533.8,12.7,546.9,12.7,546.9z" /> <path fill="#05527d" d="m88.3,490.3v-37.6l-13.4-8.4v-5c0-1.8-1.5-3.3-3.3-3.3h54.4c-1.8,0-3.3,1.5-3.3,3.3v5l-13.4,8.4v37.6h88.3 l88.3,490.3z" /> <path fill="#024264" d="m51.1,444.3h23.8l13.4,8.4h37.7l51.1,444.3z" /> <path fill="#ffffff" d="m23,598.9c0-5.2,4.2-9.4,9.4-9.4s9.4,4.2,9.4,9.4c0,5.2-4.2,9.4-9.4,9.4c27.3,608.3,23,604.1,23,598.9z m70.5,490.3h1.6v34.5l27,40.7l-1.4,0.9l-27.2-41.1l70.5,490.3z m53.8,490.3h1.7v35l-27.3,41.1l-1.4-0.9l27-40.7v490.3z" /> <path fill="#ffffff" d="m71.9,554.6c2,0,4.2,0.8,7.2,2.6c6.2,3.7,13.6,0,13.7,0l0.8,1.5c-0.3,0.2-8.3,4.2-15.3,0 c-6.4-3.8-8.4-2.7-14.7,1.7c-6.6,4.7-23.1,4.5-30.9-2.2l1.1-1.3c7.1,6.1,22.8,6.4,28.8,2.1c66.4,556.2,69,554.6,71.9,554.6 l71.9,554.6z" /> <g> <path fill="#024264" d="m37.7,460.9h50.6c1.8,0,3.3,1.5,3.3,3.3c0,1.9-1.5,3.3-3.3,3.3h37.7c-1.8,0-3.3-1.5-3.3-3.3 c34.4,462.4,35.9,460.9,37.7,460.9z" /> </g> <g> <path fill="#024264" d="m37.7,475.5h50.6c1.8,0,3.3,1.5,3.3,3.3c0,1.8-1.5,3.3-3.3,3.3h37.7c-1.8,0-3.3-1.5-3.3-3.3 c34.4,477,35.9,475.5,37.7,475.5z" /> </g> <path opacity="0.1" fill="#010101" enable-background="new " d="m125.9,584.8c0-14.2-4.7-27.4-12.7-37.9c0,0-10.4-13.1-8.7-31 c1.7-18-9.1-25.5-16.2-25.5v-8.1c1.8,0,3.3-1.5,3.3-3.3c0-1.8-1.5-3.3-3.3-3.3v-7.9c1.8,0,3.3-1.5,3.3-3.3c0-1.8-1.5-3.3-3.3-3.3 v453l-13.4-8.4v-5c0-1.8-1.5-3.3-3.3-3.3h63v211.8c97.7,647.7,125.9,619.5,125.9,584.8l125.9,584.8z" /> </g> </svg>
try below code
@keyframes move { 0% { -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 100% { -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } } @-moz-keyframes move { 0% { -moz-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -moz-transform: rotate(5deg); transform: rotate(5deg); } 100% { -moz-transform: rotate(-4deg); transform: rotate(-4deg); } } @-webkit-keyframes move { 0% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 100% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } } #lamp { top: -35%; left: 0; width: 40%; height: 100%; position: absolute; background: transparent url(../img/lamp.svg) no-repeat center; background-size: 20%; -webkit-transform-origin: center top; transform-origin: center top; -webkit-animation-name: move; -ms-animation-name: move; -moz-animation-name: move; -o-animation-name: move; animation-name: move; -webkit-animation-duration: 5s; -ms-animation-duration: 5s; -moz-animation-duration: 5s; -o-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } <svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="647.7px" viewbox="0 0 125.9 647.7" enable-background="new 0 0 125.9 647.7" xml:space="preserve"> <g id="lamp"> <path fill="#024264" d="m59.8,0h6.5v460.4h-6.5v0z" /> <path fill="#fec13f" d="m12.7,546.9c4.7,557.4,0,570.6,0,584.8c0,34.8,28.2,62.9,62.9,62.9c34.8,0,63-28.2,63-62.9 c0-14.2-4.7-27.4-12.7-37.9c0,0-10.4-13.1-8.7-31c1.7-18-9.1-25.5-16.2-25.5h37.7c-7.2,0-17.9,7.5-16.2,25.5 c23.1,533.8,12.7,546.9,12.7,546.9z" /> <path fill="#05527d" d="m88.3,490.3v-37.6l-13.4-8.4v-5c0-1.8-1.5-3.3-3.3-3.3h54.4c-1.8,0-3.3,1.5-3.3,3.3v5l-13.4,8.4v37.6h88.3 l88.3,490.3z" /> <path fill="#024264" d="m51.1,444.3h23.8l13.4,8.4h37.7l51.1,444.3z" /> <path fill="#ffffff" d="m23,598.9c0-5.2,4.2-9.4,9.4-9.4s9.4,4.2,9.4,9.4c0,5.2-4.2,9.4-9.4,9.4c27.3,608.3,23,604.1,23,598.9z m70.5,490.3h1.6v34.5l27,40.7l-1.4,0.9l-27.2-41.1l70.5,490.3z m53.8,490.3h1.7v35l-27.3,41.1l-1.4-0.9l27-40.7v490.3z" /> <path fill="#ffffff" d="m71.9,554.6c2,0,4.2,0.8,7.2,2.6c6.2,3.7,13.6,0,13.7,0l0.8,1.5c-0.3,0.2-8.3,4.2-15.3,0 c-6.4-3.8-8.4-2.7-14.7,1.7c-6.6,4.7-23.1,4.5-30.9-2.2l1.1-1.3c7.1,6.1,22.8,6.4,28.8,2.1c66.4,556.2,69,554.6,71.9,554.6 l71.9,554.6z" /> <g> <path fill="#024264" d="m37.7,460.9h50.6c1.8,0,3.3,1.5,3.3,3.3c0,1.9-1.5,3.3-3.3,3.3h37.7c-1.8,0-3.3-1.5-3.3-3.3 c34.4,462.4,35.9,460.9,37.7,460.9z" /> </g> <g> <path fill="#024264" d="m37.7,475.5h50.6c1.8,0,3.3,1.5,3.3,3.3c0,1.8-1.5,3.3-3.3,3.3h37.7c-1.8,0-3.3-1.5-3.3-3.3 c34.4,477,35.9,475.5,37.7,475.5z" /> </g> <path opacity="0.1" fill="#010101" enable-background="new " d="m125.9,584.8c0-14.2-4.7-27.4-12.7-37.9c0,0-10.4-13.1-8.7-31 c1.7-18-9.1-25.5-16.2-25.5v-8.1c1.8,0,3.3-1.5,3.3-3.3c0-1.8-1.5-3.3-3.3-3.3v-7.9c1.8,0,3.3-1.5,3.3-3.3c0-1.8-1.5-3.3-3.3-3.3 v453l-13.4-8.4v-5c0-1.8-1.5-3.3-3.3-3.3h63v211.8c97.7,647.7,125.9,619.5,125.9,584.8l125.9,584.8z" /> </g> </svg> 
Comments
Post a Comment