所以我正在做的是使用stroke-dasharray动画耳朵并继续点.
我设法完成了耳朵画,但我不知道如何控制点的时间.以下是我的动画步骤：
> 5s内的耳朵绘制动画
> 5秒后,继续点动画(逐行动画)
>完成点动画后,循环回到第1步
这是我的代码,但它逐渐闪烁.我该如何调整时间？
.firstpath { stroke-dasharray: 1500; animation: firstanimate 5s linear forwards infinite;}@keyframes firstanimate { from { stroke-dashoffset: 1500; } to { stroke-dashoffset: 0; }}.secondpath { stroke-dasharray: 500; animation: secondanimate 5s linear forwards infinite;}@keyframes secondanimate { from { stroke-dashoffset: 500; } to { stroke-dashoffset: 0; }}.thirdpath { stroke-dasharray: 500; animation: thirdanimate 5s linear forwards infinite;}@keyframes thirdanimate { from { stroke-dashoffset: 500; } to { stroke-dashoffset: 0; }}.row1col1 { animation-delay: 1s; animation: blink 2s step-start 0s infinite; -webkit-animation: blink 2s step-start 0s infinite;}@keyframes blink { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; }}@-webkit-keyframes blink { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; }} <svg version="1.1" ID="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" wIDth="841.89px" height="595.28px" vIEwBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve"> <g> <path fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M253.441,284.167c0,0-0.883-14.535,15.429-18.551c5.364-1.32,15.943-0.665,21.667,6.79c13.859,18.051-3.235,32.286-8.087,37.262 c-4.853,4.979-7.713,21.027-17.543,20.528c-9.829-0.497-12.69-6.717-12.317-11.818" /> <path fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M285.249,285.252c0,0.654-8.212-8.864-10.544c-9.519-2.334-16.796,8.211-10.825,17.449c2.613-1.12,5.226,0.652,5.599,2.52 c0.373,1.866-1.213,4.199-3.826,4.199" /> <path fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M257.815,307.553c0,0-3.732,5.879,2.333,8.118c6.065,2.241,5.318-8.118,8.865-9.237c3.545-1.119,11.943-2.519,11.943-10.265 c0-7.744-6.398-16.451-17.522-11.958" /> </g> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="287.987" x2="324.156" y2="286.627" /> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="285.335" x2="332.744" y2="284.167" /> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="338.25" y1="301.171" x2="343.41" y2="301.171" /> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="301.171" x2="333.75" y2="301.171" /> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="301.171" x2="324.156" y2="301.171" /> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="313.741" y1="314.625" x2="319.41" y2="315.987" /> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="323.741" y1="316.746" x2="329.667" y2="318.142" /></svg>解决方法 形成部分形状的方式,这将需要多个关键帧动画以您想要的方式工作.
以下是您需要做的事情：
>耳朵动画虽然预计在5s标记处完成但不应该开始下一次迭代,直到线条动画完成.也就是说,耳朵应该在线完成动画所花费的时间内保持闲置状态.因此,我们必须为耳朵设置动画持续时间,以便它涵盖线条完成动画所需的时间量.这里,每个线条组件需要1秒,因此所有元素(耳朵和线条)的总动画持续时间将为12秒.
>耳朵动画应该在5s标记处完成(总持续时间为12s),因此从 – 到关键帧设置应该用百分比替换.耳朵动画应该从0％开始并以41％(大约是5s标记)完成.从那里,它应该保持其位置直到100％(12s)标记(这基本上直到线完成他们的动画).
>每个线条组件应在其前一个零件完成其动画后开始,因此row1col1应该从41％开始,这时耳朵变得完全可见(直到该点它应该保持不可见).
> row1col1需要1s到动画(大约是12s的8％),因此row1col2应该等到总持续时间的49％才能开始动画.类似地,row2col1应该从57％开始,row2col2应该从66％开始,依此类推.
>如果线条需要慢慢淡入,则以不透明度开始：0为41％并获得不透明度：1为49％(对于row1col1,依此类推).另一方面,如果你需要它们瞬间出现,减少不透明度的百分比：1.在片段中,我使row1col1达到不透明度：1为42％本身(类似于0.12s).
笔记：
>我还修改了耳朵组件的stroke-dasharray设置,以避免耳朵动画完成和线条动画开始之间的延迟.
>我还建议你得到一些SVG专家的帮助来检查是否.部件可以最小化,因为它会减少没有.需要的关键帧等等.不幸的是,我的SVG知识是有限的,所以我无法帮助它.
.firstpath { stroke-dasharray: 150; animation: firstanimate 12s linear forwards infinite;}@keyframes firstanimate { 0% { stroke-dashoffset: 150; } 41% { stroke-dashoffset: 0; }}.secondpath { stroke-dasharray: 100; animation: secondanimate 12s linear forwards infinite;}@keyframes secondanimate { 0% { stroke-dashoffset: 100; } 41% { stroke-dashoffset: 0; }}.thirdpath { stroke-dasharray: 65; animation: thirdanimate 12s linear forwards infinite;}@keyframes thirdanimate { 0% { stroke-dashoffset: 65; } 41% { stroke-dashoffset: 0; }}line { opacity: 0;}.row1col1 { animation: blink 12s linear forwards infinite;}@keyframes blink { 41% { opacity: 0; } 42%,100% { opacity: 1; } }.row1col2 { animation: blink2 12s linear forwards infinite;}@keyframes blink2 { 49% { opacity: 0; } 50%,100% { opacity: 1; }}.row2col1 { animation: blink3 12s linear forwards infinite;}@keyframes blink3 { 57% { opacity: 0; } 58%,100% { opacity: 1; }}.row2col2 { animation: blink4 12s linear forwards infinite;}@keyframes blink4 { 66% { opacity: 0; } 67%,100% { opacity: 1; }}.row2col3 { animation: blink5 12s linear forwards infinite;}@keyframes blink5 { 75% { opacity: 0; } 76%,100% { opacity: 1; }}.row3col1 { animation: blink6 12s linear forwards infinite;}@keyframes blink6 { 84% { opacity: 0; } 85%,100% { opacity: 1; }}.row3col2 { animation: blink7 12s linear forwards infinite;}@keyframes blink7 { 92% { opacity: 0; } 93%,100% { opacity: 1; }} <script src="https://cdnjs.cloudflare.com/AJAX/libs/prefixfree/1.0.7/prefixfree.min.Js"></script><svg version="1.1" ID="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" wIDth="841.89px" height="595.28px" vIEwBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve"> <g> <path fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M253.441,11.943-10.265 c0-7.744-6.398-16.451-17.522-11.958" /> </g> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="287.987" x2="324.156" y2="286.627" /> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="285.335" x2="332.744" y2="284.167" /> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="338.25" y1="301.171" x2="343.41" y2="301.171" /> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="328.667" y1="301.171" x2="333.75" y2="301.171" /> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="319.41" y1="301.171" x2="324.156" y2="301.171" /> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="313.741" y1="314.625" x2="319.41" y2="315.987" /> <line fill="none" stroke="#000000" stroke-wIDth="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="323.741" y1="316.746" x2="329.667" y2="318.142" /></svg>总结
以上是内存溢出为你收集整理的html – 如何控制CSS3动画的时机全部内容，希望文章能够帮你解决html – 如何控制CSS3动画的时机所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）