这个问题在这里已有答案：
尝试从中心创建缩小动画。无法让svg垂直居中以挽救我的生命。也希望它能缩小浏览器窗口宽度而不会重置回100％。
<html>
<head>
<style>
div {
display: flex;
justify-content: center;
align-items: center;
animation-name: example;
animation-duration: 0.5s;
animation-iteration-count: 1;
}
@keyframes example {
0% {zoom: 250%}
33% {zoom: 500%}
60% {zoom: 750%}
80% {zoom: 1000%}
100% {zoom: 1250%}
}
body {
background-color: #4D4D4D;
}
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="#fff">
<path d="M0 0h48v48H0z" fill="none"/>
<path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/>
</svg>
</div>
</body>
<html>
div {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
svg {
animation-name: zoom;
animation-duration: 0.5s;
transition: all 1s;
animation-iteration-count: 1;
}
@-webkit-keyframes zoom {
0% {
width: 55px;
height: 55;
}
100% {
width: 70px;
height: 70px;
}
}
@-moz-keyframes zoom {
0% {
width: 55px;
height: 55;
}
100% {
width: 70px;
height: 70px;
}
}
@-o-keyframes zoom {
0% {
width: 55px;
height: 55;
}
100% {
width: 70px;
height: 70px;
}
}
@keyframes zoom {
0% {
width: 55px;
height: 55;
}
100% {
width: 70px;
height: 70px;
}
}
你可以编辑和添加你想要的任意数量的帧，我不认为你可以使用缩放svg，因为它的矢量基础。加上div的高度，以便在弹性框页面的中间对齐。