我是SVG的新手,并试图在this pin
中设置两个圆圈的动画动画无效,我认为我的代码存在问题。
SVG
<svg xmlns="http://www.w3.org/2000/svg">
<rect height="60" width="100" fill="#B32317" rx="10" ry="10"></rect>
<g class="eyes">
<circle class="c1" cx="25" cy="20" r="10" fill="#fff"></circle>
<circle class="c1" cx="75" cy="20" r="10" fill="#fff"></circle>
<circle cx="25" cy="20" r="7" fill="#B32317"></circle>
<circle cx="75" cy="20" r="7" fill="#B32317"></circle>
</g>
</svg>
CSS
.c1 {
-webkit-animation-name: scaleme;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
animation-name: scaleme;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@-webkit-keyframes scaleme {
transform: scale(1.1) translate(5px,0);
}
请帮忙吗?
谢谢,
答案 0 :(得分:1)
您的关键帧应该是这样写的
@-webkit-keyframes scaleme {
0% { transform: scale(1) translate(0,0); }
100% { transform: scale(1.1) translate(5px,0); }
}
@keyframes scaleme {
0% { transform: scale(1) translate(0,0); }
100% { transform: scale(1.1) translate(5px,0); }
}
答案 1 :(得分:0)
@keyframes scaleme {
0% {
transform: scale(1.1) translate(5px,0);
},
100% {
transform: scale(1.0) translate(0px,0);
}
}