1
私のランプアニメーションに問題があります。ここで回転アニメーション中に背景画像が途切れています
はfiddleであり、また
@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
\t \t 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
\t \t 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
\t \t 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
\t \t 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
\t \t 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
\t \t 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
\t \t \t 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
\t \t \t 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
\t \t 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
\t \t 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>
をお試しください'＃lamp'の –