[英]stroke-dashoffset animation with keyframes and css variables
要么我疯了,要么我发现关键帧和svg动画很奇怪。 我只是围绕一个SVG笔画设置动画,实际上创建了一个动画百分比刻度盘。
一旦在混合中添加CSS变量,关键帧动画就不会动画,而只是跳到最终状态。
这是我的PEN演示: https : //codepen.io/tateman66/pen/ePYZmx
document.getElementById('btn').addEventListener('click', function(){ var percent = document.getElementById('percent').value; document.querySelector('.left').style.setProperty('--leftPercent', percent); });
svg { height: 200px; width: 200px; --leftPercent: 300; } .center { fill: #6d6e71; } .stroke { stroke: rgba(109,110,113, .75); fill: none; stroke-dasharray: 300; stroke-dashoffset: var(--leftPercent); animation: left 5s ease-in forwards; //transition: stroke-dashoffset 2s; } @keyframes left { to { stroke-dashoffset: var(--leftPercent); } }
<svg viewBox="0 0 100 100" class="left"> <circle class="center" cx="50" cy="50" r="25"></circle> <circle class="stroke" cx="50" cy="50" r="45" stroke-width="10" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300"></circle> </svg> <br><br> <input type="text" id="percent" value="300" /> <button id="btn">Animate</button>
将50扔到文本框中,然后单击动画。 然后,将注释掉的行拖入触发器以使用动画代替过渡,然后重新运行它。
带有过渡但不具有关键帧的动画。
有人在里面看到明显的东西吗?
谢谢
因为to
状态与from
状态相同,所以没有动画。 基本上,如果您未from
指定,则将使用元素的初始值,并且还会使用CSS变量(如to
设置此值。 另一点是动画将只运行一次,因此即使您以后更改它的某些状态,也不会触发动画再次运行。
您可以为此简单地考虑过渡:
document.getElementById('btn').addEventListener('click', function(){ var percent = document.getElementById('percent').value; document.querySelector('.left').style.setProperty('--leftPercent', percent); });
svg { height: 200px; width: 200px; --leftPercent: 300; } .center { fill: #6d6e71; } .stroke { stroke: rgba(109,110,113, .75); fill: none; stroke-dasharray: 300; stroke-dashoffset: var(--leftPercent); animation: left 5s ease-in forwards; transition: stroke-dashoffset 2s; }
<svg viewBox="0 0 100 100" class="left"> <circle class="center" cx="50" cy="50" r="25"></circle> <circle class="stroke" cx="50" cy="50" r="45" stroke-width="10" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300"></circle> </svg> <br><br> <input type="text" id="percent" value="300" /> <button id="btn">Animate</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.