css 动画反转
css reverse of animation
我做了一个 css 动画,但我没有反转动画。我尝试了动画的变体版本,但我没有。它有一些错误。
.animation {
stroke-dasharray: 296 0;
stroke-dashoffset: 296;
animation: geri-sayim 5s linear forwards;
}
.animation-reverse{
stroke-dasharray: 296 296;
stroke-dashoffset: 0;
animation: doldur 2s linear forwards;
}
@keyframes geri-sayim {
100% { stroke-dasharray: 296; }
}
@keyframes doldur {
100% { stroke-dasharray: 0; }
}
.geri-sayim-sayaci{
width:100px;
}
<div class="geri-sayim-sayaci">
<svg class="viewbox" viewBox="-5 -5 110 110">
<circle id="progress" class="animation-reverse" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#1e8bff" stroke-width="8" fill="none"/>
</svg>
</div>
这是一种逻辑行为,因为您将 一个值 指定为 stroke-dasharray
(尝试手动将此值更改为 0,您会看到)。我想你想要这样的东西,你需要用一个 0 指定两个值:
.animation {
stroke-dasharray: 296 0;
stroke-dashoffset: 296;
animation: geri-sayim 2s linear forwards;
}
.animation-reverse{
stroke-dasharray: 296 296;
stroke-dashoffset: 0;
animation: doldur 2s linear forwards;
}
@keyframes geri-sayim {
100% { stroke-dasharray: 296 296; }
}
@keyframes doldur {
100% { stroke-dasharray: 0 296; }
}
.geri-sayim-sayaci{
width:100px;
}
<div class="geri-sayim-sayaci">
<svg class="viewbox" viewBox="-5 -5 110 110">
<circle id="progress" class="animation-reverse" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#1e8bff" stroke-width="8" fill="none"/>
</svg>
</div>
<div class="geri-sayim-sayaci">
<svg class="viewbox" viewBox="-5 -5 110 110">
<circle id="progress" class="animation" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#1e8bff" stroke-width="8" fill="none"/>
</svg>
</div>
或者您可以考虑在只需要一个值的地方设置 stroke-dashoffset
动画:
.animation {
stroke-dasharray: 296;
stroke-dashoffset: 296;
animation: geri-sayim 2s linear forwards;
}
.animation-reverse{
stroke-dasharray: 296;
stroke-dashoffset: 0;
animation: doldur 2s linear forwards;
}
@keyframes geri-sayim {
100% { stroke-dashoffset: 0; }
}
@keyframes doldur {
100% { stroke-dashoffset: 296; }
}
.geri-sayim-sayaci{
width:100px;
}
<div class="geri-sayim-sayaci">
<svg class="viewbox" viewBox="-5 -5 110 110">
<circle id="progress" class="animation-reverse" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#1e8bff" stroke-width="8" fill="none"/>
</svg>
</div>
<div class="geri-sayim-sayaci">
<svg class="viewbox" viewBox="-5 -5 110 110">
<circle id="progress" class="animation" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#1e8bff" stroke-width="8" fill="none"/>
</svg>
</div>
我做了一个 css 动画,但我没有反转动画。我尝试了动画的变体版本,但我没有。它有一些错误。
.animation {
stroke-dasharray: 296 0;
stroke-dashoffset: 296;
animation: geri-sayim 5s linear forwards;
}
.animation-reverse{
stroke-dasharray: 296 296;
stroke-dashoffset: 0;
animation: doldur 2s linear forwards;
}
@keyframes geri-sayim {
100% { stroke-dasharray: 296; }
}
@keyframes doldur {
100% { stroke-dasharray: 0; }
}
.geri-sayim-sayaci{
width:100px;
}
<div class="geri-sayim-sayaci">
<svg class="viewbox" viewBox="-5 -5 110 110">
<circle id="progress" class="animation-reverse" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#1e8bff" stroke-width="8" fill="none"/>
</svg>
</div>
这是一种逻辑行为,因为您将 一个值 指定为 stroke-dasharray
(尝试手动将此值更改为 0,您会看到)。我想你想要这样的东西,你需要用一个 0 指定两个值:
.animation {
stroke-dasharray: 296 0;
stroke-dashoffset: 296;
animation: geri-sayim 2s linear forwards;
}
.animation-reverse{
stroke-dasharray: 296 296;
stroke-dashoffset: 0;
animation: doldur 2s linear forwards;
}
@keyframes geri-sayim {
100% { stroke-dasharray: 296 296; }
}
@keyframes doldur {
100% { stroke-dasharray: 0 296; }
}
.geri-sayim-sayaci{
width:100px;
}
<div class="geri-sayim-sayaci">
<svg class="viewbox" viewBox="-5 -5 110 110">
<circle id="progress" class="animation-reverse" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#1e8bff" stroke-width="8" fill="none"/>
</svg>
</div>
<div class="geri-sayim-sayaci">
<svg class="viewbox" viewBox="-5 -5 110 110">
<circle id="progress" class="animation" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#1e8bff" stroke-width="8" fill="none"/>
</svg>
</div>
或者您可以考虑在只需要一个值的地方设置 stroke-dashoffset
动画:
.animation {
stroke-dasharray: 296;
stroke-dashoffset: 296;
animation: geri-sayim 2s linear forwards;
}
.animation-reverse{
stroke-dasharray: 296;
stroke-dashoffset: 0;
animation: doldur 2s linear forwards;
}
@keyframes geri-sayim {
100% { stroke-dashoffset: 0; }
}
@keyframes doldur {
100% { stroke-dashoffset: 296; }
}
.geri-sayim-sayaci{
width:100px;
}
<div class="geri-sayim-sayaci">
<svg class="viewbox" viewBox="-5 -5 110 110">
<circle id="progress" class="animation-reverse" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#1e8bff" stroke-width="8" fill="none"/>
</svg>
</div>
<div class="geri-sayim-sayaci">
<svg class="viewbox" viewBox="-5 -5 110 110">
<circle id="progress" class="animation" cx="50" cy="50" r="47"
transform="rotate(-90 50 50)" pointer-events="all"
stroke="#1e8bff" stroke-width="8" fill="none"/>
</svg>
</div>