0
私はどのブラウザでもSVGアニメーションを見ることができません（私はGoogle Chrome、Firefox、Edge、Internet Explorerをチェックしました）。私は他のブラウザをチェックしていないので、私はGoogle Chromeを使用しているため、そのブラウザでそのアニメーションを動作させたいと思っています。私は-webkit-を追加しましたが、それでも動作しません。SVGアニメーションが動作しない
これは私のHTMLです：
<!DOCTYPE html>
<html>
<head>
<title>Badge Animation</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg class="badge" xmlns="http://www.w3.org/2000/svg" height="440" width="440" viewBox="-40 -40 440 440">
<circle class="outer" fill="#F9D535" stroke="#fff" stroke-width="8" stroke-linecap="round" cx="180" cy="180" r="157"/>
<circle class="inner" fill="#DFB828" stroke="#fff" stroke-width="8" cx="180" cy="180" r="108.3"/>
<path class="inline" d="M89.4 276.7c-26-24.2-42.2-58.8-42.2-97.1 0-22.6 5.6-43.8 15.5-62.4m234.7.1c9.9 18.6 15.4 39.7 15.4 62.2 0 38.3-16.2 72.8-42.1 97" stroke="#CAA61F" stroke-width="7" stroke-linecap="round" fill="none"/>
<g class="star">
<path fill="#F9D535" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z"/>
<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="180" cy="107.8" r="4.4"/>
<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="223.7" cy="244.2" r="4.4"/>
<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="135.5" cy="244.2" r="4.4"/>
<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="108.3" cy="160.4" r="4.4"/>
<circle fill="#DFB828" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" cx="251.7" cy="160.4" r="4.4"/>
</g>
</svg>
</body>
</html>
そして、これは私のCSSです：
/* --------------------
Base
---------------------- */
body {
background: #8069a1;
padding-top: 60px;
}
svg {
margin: auto;
display: block;
}
/* ---------------------
Keyframes
--------------------- */
@keyframes grow {
0% {
transform: scale (0);
}
30% {
transform: scale (1.1);
}
60% {
transform: scale (0.9);
}
100% {
transform: scale (1);
}
}
@-webkit-keyframes grow {
0% {
-webkit-transform: scale (0);
}
30% {
-webkit-transform: scale (1.1);
}
60% {
-webkit-transform: scale (0.9);
}
}
/* --------------------------
SVG Styles
--------------------------- */
.badge * {
transform-origin: 50% 50%;
}
.badge * {
-webkit-transform-origin: 50% 50%;
}
.outer,
.inner,
.inline {
animation: grow 1s ease-out backwards;
}
.outer,
.inner,
.inline {
-webkit-animation: grow 1s ease-out backwards;
}
.inner {
animation-delay: .1s;
}
.inner {
-webkit-animation-delay: .1s;
}
.inline {
animation-delay: .15s;
}
.inline {
-webkit-animation-delay:.15s;
}
SVGは全く示されていますか？ – jelic98