CSS 动画通过 class 起作用，但不能通过父元素的数据名称起作用
CSS animation works through class but doesn't work through data-name for parent element
我是一名平面设计师，想学习如何编码 :)
我需要找到一种通过 data-names 调用动画的方法。
我发现它适用于子元素但不适用于父元素，但我找不到原因。
如果我将 data-name 更改为 class 它可以完美运行，但由于这种情况，我只能使用数据-名字。
你知道为什么它不起作用吗？
我知道我可以单独为子元素设置动画以获得相同的效果，但我认为找出未来的问题是件好事。
请检查
第 5,6 行（样式）和 41（g）
<svg id="ed60e92c-8023-4b4e-a257-3580dabca02a" data-name="action_arrow2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.52 119.52"><defs>
<style type="text/css">
.bf17fc5c-7924-499b-959f-404e7a5d6c84{fill:none;}.a6702ecc-977e-4ec2-8add-47217594510b{fill:yellow;}.fbbc3ad0-37ae-41ab-8c9e-860970eb1313{fill:black;}
<!-- g [data-name="action_arrow2"] { Doesn't work -->
.action_arrow2 {
animation: 6s infinite;
animation-name: arrow2_animation;
transform-origin: 50% 50%;}
@keyframes arrow2_animation {
0% { transform: rotate(-45deg); }
50% { transform: rotate(45deg); }
100% { transform: rotate(-45deg); }}
g [data-name="clockwise"] {
animation: 6s infinite;
animation-name: clockwise_animation;
transform-origin: 50% 50%;}
@keyframes clockwise_animation {
0% { opacity: 1; }
47% { opacity: 1; }
50% { opacity: 0; }
97% { opacity: 0; }
100% { opacity: 1; }}
g [data-name="counterclockwise"] {
animation: 6s infinite;
animation-name: counter_animation;
transform-origin: 50% 50%;}
@keyframes counter_animation {
0% { opacity: 0; }
47% { opacity: 0; }
50% { opacity: 1; }
97% { opacity: 1; }
100% { opacity: 0; } }
</style>
</defs>
<g id="aeee668b-21ac-41e3-b248-485eb27a0a1b" data-name="action_arrow2" class="action_arrow2">
<circle id="b4485f64-ea17-46a9-bfb3-7702974cac03" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
<g id="a6f987a9-6dfa-4dd8-80b8-eecc39586c4c" data-name="circle_transparent">
<path id="a0aa0306-a048-4ba8-8272-84096ecec18f" data-name="circle" class="a6702ecc-977e-4ec2-8add-47217594510b" d="M34.32,28.39a40.83,40.83,0,1,1-5.76,57.46A40.88,40.88,0,0,1,34.32,28.39ZM83.49,88.52a36.84,36.84,0,1,0-51.84-5.2A36.9,36.9,0,0,0,83.49,88.52Z" transform="translate(-0.41 -0.24)"/>
<g id="a6bb816d-4d36-49e6-8262-1145b3d71b2a" data-name="clockwise">
<circle id="eedbf415-6006-412e-a444-1528a8300e18" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
<path id="e1f5490c-6a8d-44b8-8037-690f3b52b4d6" data-name="clockwise2" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M28.7,79.22A36.66,36.66,0,0,1,26.08,46l3.37,2,.15-12L19.16,41.88l3.46,2a40.66,40.66,0,0,0,2.66,37.38C26.2,82.81,29.52,80.57,28.7,79.22Z" transform="translate(-0.41 -0.24)"/>
<path id="b89a253a-bf5f-41b1-853f-ff16fbdae36a" data-name="clockwise1" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M91.75,40.89a36.66,36.66,0,0,1,2.62,33.23l-3.37-2-.15,12,10.44-5.86-3.46-2a40.61,40.61,0,0,0-2.67-37.37C94.25,37.31,90.93,39.54,91.75,40.89Z" transform="translate(-0.41 -0.24)"/>
</g>
<g id="ad441e68-0db6-43d4-b7b7-ab1edf7c8b4d" data-name="counterclockwise">
<circle id="ac342f71-48ac-449a-9aab-4699d3dd8ca4" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
<path id="b9bdcf1a-9445-47b5-98dc-0c6920da0731" data-name="counterclockwise1" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M91.73,79.14A36.67,36.67,0,0,0,94.24,45.9l-3.36,2-.19-12,10.46,5.82L97.7,43.83a40.63,40.63,0,0,1-2.55,37.38C94.24,82.72,90.91,80.49,91.73,79.14Z" transform="translate(-0.41 -0.24)"/>
<path id="a9e3bd80-2516-438c-8f1e-55b8e13567ad" data-name="counterclockwise2" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M28.55,41A36.67,36.67,0,0,0,26,74.25l3.37-2,.18,12L19.14,78.38l3.45-2.06a40.67,40.67,0,0,1,2.54-37.39C26.05,37.43,29.37,39.66,28.55,41Z" transform="translate(-0.41 -0.24)"/>
</g>
</g> </g>
</svg>
谢谢，
期待。这是我在社区中的第一个 post。
如果您想使用 data-name="counterclockwise" 定位 g 元素，请使用
g[data-name="counterclockwise"] {
而不是
g [data-name="counterclockwise"] {
（或完全省略 g:)
[data-name="counterclockwise"] {
css中的space表示'child selector'：https://css-tricks.com/whats-the-difference.
<svg id="ed60e92c-8023-4b4e-a257-3580dabca02a" data-name="action_arrow2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.52 119.52"><defs>
<style type="text/css">
.bf17fc5c-7924-499b-959f-404e7a5d6c84{fill:none;}.a6702ecc-977e-4ec2-8add-47217594510b{fill:yellow;}.fbbc3ad0-37ae-41ab-8c9e-860970eb1313{fill:black;}
g[data-name="action_arrow2"] {
animation: 6s infinite;
animation-name: arrow2_animation;
transform-origin: 50% 50%;
}
@keyframes arrow2_animation {
0% { transform: rotate(-45deg); }
50% { transform: rotate(45deg); }
100% { transform: rotate(-45deg); }
}
g[data-name="clockwise"] {
animation: 6s infinite;
animation-name: clockwise_animation;
transform-origin: 50% 50%;}
@keyframes clockwise_animation {
0% { opacity: 1; }
47% { opacity: 1; }
50% { opacity: 0; }
97% { opacity: 0; }
100% { opacity: 1; }}
g[data-name="counterclockwise"] {
animation: 6s infinite;
animation-name: counter_animation;
transform-origin: 50% 50%;}
@keyframes counter_animation {
0% { opacity: 0; }
47% { opacity: 0; }
50% { opacity: 1; }
97% { opacity: 1; }
100% { opacity: 0; } }
</style>
</defs>
<g id="aeee668b-21ac-41e3-b248-485eb27a0a1b" data-name="action_arrow2" class="action_arrow2">
<circle id="b4485f64-ea17-46a9-bfb3-7702974cac03" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
<g id="a6f987a9-6dfa-4dd8-80b8-eecc39586c4c" data-name="circle_transparent">
<path id="a0aa0306-a048-4ba8-8272-84096ecec18f" data-name="circle" class="a6702ecc-977e-4ec2-8add-47217594510b" d="M34.32,28.39a40.83,40.83,0,1,1-5.76,57.46A40.88,40.88,0,0,1,34.32,28.39ZM83.49,88.52a36.84,36.84,0,1,0-51.84-5.2A36.9,36.9,0,0,0,83.49,88.52Z" transform="translate(-0.41 -0.24)"/>
<g id="a6bb816d-4d36-49e6-8262-1145b3d71b2a" data-name="clockwise">
<circle id="eedbf415-6006-412e-a444-1528a8300e18" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
<path id="e1f5490c-6a8d-44b8-8037-690f3b52b4d6" data-name="clockwise2" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M28.7,79.22A36.66,36.66,0,0,1,26.08,46l3.37,2,.15-12L19.16,41.88l3.46,2a40.66,40.66,0,0,0,2.66,37.38C26.2,82.81,29.52,80.57,28.7,79.22Z" transform="translate(-0.41 -0.24)"/>
<path id="b89a253a-bf5f-41b1-853f-ff16fbdae36a" data-name="clockwise1" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M91.75,40.89a36.66,36.66,0,0,1,2.62,33.23l-3.37-2-.15,12,10.44-5.86-3.46-2a40.61,40.61,0,0,0-2.67-37.37C94.25,37.31,90.93,39.54,91.75,40.89Z" transform="translate(-0.41 -0.24)"/>
</g>
<g id="ad441e68-0db6-43d4-b7b7-ab1edf7c8b4d" data-name="counterclockwise">
<circle id="ac342f71-48ac-449a-9aab-4699d3dd8ca4" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
<path id="b9bdcf1a-9445-47b5-98dc-0c6920da0731" data-name="counterclockwise1" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M91.73,79.14A36.67,36.67,0,0,0,94.24,45.9l-3.36,2-.19-12,10.46,5.82L97.7,43.83a40.63,40.63,0,0,1-2.55,37.38C94.24,82.72,90.91,80.49,91.73,79.14Z" transform="translate(-0.41 -0.24)"/>
<path id="a9e3bd80-2516-438c-8f1e-55b8e13567ad" data-name="counterclockwise2" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M28.55,41A36.67,36.67,0,0,0,26,74.25l3.37-2,.18,12L19.14,78.38l3.45-2.06a40.67,40.67,0,0,1,2.54-37.39C26.05,37.43,29.37,39.66,28.55,41Z" transform="translate(-0.41 -0.24)"/>
</g>
</g> </g>
</svg>
我是一名平面设计师，想学习如何编码 :) 我需要找到一种通过 data-names 调用动画的方法。 我发现它适用于子元素但不适用于父元素，但我找不到原因。 如果我将 data-name 更改为 class 它可以完美运行，但由于这种情况，我只能使用数据-名字。
你知道为什么它不起作用吗？
我知道我可以单独为子元素设置动画以获得相同的效果，但我认为找出未来的问题是件好事。 请检查 第 5,6 行（样式）和 41（g）
<svg id="ed60e92c-8023-4b4e-a257-3580dabca02a" data-name="action_arrow2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.52 119.52"><defs>
<style type="text/css">
.bf17fc5c-7924-499b-959f-404e7a5d6c84{fill:none;}.a6702ecc-977e-4ec2-8add-47217594510b{fill:yellow;}.fbbc3ad0-37ae-41ab-8c9e-860970eb1313{fill:black;}
<!-- g [data-name="action_arrow2"] { Doesn't work -->
.action_arrow2 {
animation: 6s infinite;
animation-name: arrow2_animation;
transform-origin: 50% 50%;}
@keyframes arrow2_animation {
0% { transform: rotate(-45deg); }
50% { transform: rotate(45deg); }
100% { transform: rotate(-45deg); }}
g [data-name="clockwise"] {
animation: 6s infinite;
animation-name: clockwise_animation;
transform-origin: 50% 50%;}
@keyframes clockwise_animation {
0% { opacity: 1; }
47% { opacity: 1; }
50% { opacity: 0; }
97% { opacity: 0; }
100% { opacity: 1; }}
g [data-name="counterclockwise"] {
animation: 6s infinite;
animation-name: counter_animation;
transform-origin: 50% 50%;}
@keyframes counter_animation {
0% { opacity: 0; }
47% { opacity: 0; }
50% { opacity: 1; }
97% { opacity: 1; }
100% { opacity: 0; } }
</style>
</defs>
<g id="aeee668b-21ac-41e3-b248-485eb27a0a1b" data-name="action_arrow2" class="action_arrow2">
<circle id="b4485f64-ea17-46a9-bfb3-7702974cac03" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
<g id="a6f987a9-6dfa-4dd8-80b8-eecc39586c4c" data-name="circle_transparent">
<path id="a0aa0306-a048-4ba8-8272-84096ecec18f" data-name="circle" class="a6702ecc-977e-4ec2-8add-47217594510b" d="M34.32,28.39a40.83,40.83,0,1,1-5.76,57.46A40.88,40.88,0,0,1,34.32,28.39ZM83.49,88.52a36.84,36.84,0,1,0-51.84-5.2A36.9,36.9,0,0,0,83.49,88.52Z" transform="translate(-0.41 -0.24)"/>
<g id="a6bb816d-4d36-49e6-8262-1145b3d71b2a" data-name="clockwise">
<circle id="eedbf415-6006-412e-a444-1528a8300e18" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
<path id="e1f5490c-6a8d-44b8-8037-690f3b52b4d6" data-name="clockwise2" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M28.7,79.22A36.66,36.66,0,0,1,26.08,46l3.37,2,.15-12L19.16,41.88l3.46,2a40.66,40.66,0,0,0,2.66,37.38C26.2,82.81,29.52,80.57,28.7,79.22Z" transform="translate(-0.41 -0.24)"/>
<path id="b89a253a-bf5f-41b1-853f-ff16fbdae36a" data-name="clockwise1" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M91.75,40.89a36.66,36.66,0,0,1,2.62,33.23l-3.37-2-.15,12,10.44-5.86-3.46-2a40.61,40.61,0,0,0-2.67-37.37C94.25,37.31,90.93,39.54,91.75,40.89Z" transform="translate(-0.41 -0.24)"/>
</g>
<g id="ad441e68-0db6-43d4-b7b7-ab1edf7c8b4d" data-name="counterclockwise">
<circle id="ac342f71-48ac-449a-9aab-4699d3dd8ca4" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
<path id="b9bdcf1a-9445-47b5-98dc-0c6920da0731" data-name="counterclockwise1" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M91.73,79.14A36.67,36.67,0,0,0,94.24,45.9l-3.36,2-.19-12,10.46,5.82L97.7,43.83a40.63,40.63,0,0,1-2.55,37.38C94.24,82.72,90.91,80.49,91.73,79.14Z" transform="translate(-0.41 -0.24)"/>
<path id="a9e3bd80-2516-438c-8f1e-55b8e13567ad" data-name="counterclockwise2" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M28.55,41A36.67,36.67,0,0,0,26,74.25l3.37-2,.18,12L19.14,78.38l3.45-2.06a40.67,40.67,0,0,1,2.54-37.39C26.05,37.43,29.37,39.66,28.55,41Z" transform="translate(-0.41 -0.24)"/>
</g>
</g> </g>
</svg>
谢谢， 期待。这是我在社区中的第一个 post。
如果您想使用 data-name="counterclockwise" 定位 g 元素，请使用
g[data-name="counterclockwise"] {
而不是
g [data-name="counterclockwise"] {
（或完全省略 g:)
[data-name="counterclockwise"] {
css中的space表示'child selector'：https://css-tricks.com/whats-the-difference.
<svg id="ed60e92c-8023-4b4e-a257-3580dabca02a" data-name="action_arrow2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.52 119.52"><defs>
<style type="text/css">
.bf17fc5c-7924-499b-959f-404e7a5d6c84{fill:none;}.a6702ecc-977e-4ec2-8add-47217594510b{fill:yellow;}.fbbc3ad0-37ae-41ab-8c9e-860970eb1313{fill:black;}
g[data-name="action_arrow2"] {
animation: 6s infinite;
animation-name: arrow2_animation;
transform-origin: 50% 50%;
}
@keyframes arrow2_animation {
0% { transform: rotate(-45deg); }
50% { transform: rotate(45deg); }
100% { transform: rotate(-45deg); }
}
g[data-name="clockwise"] {
animation: 6s infinite;
animation-name: clockwise_animation;
transform-origin: 50% 50%;}
@keyframes clockwise_animation {
0% { opacity: 1; }
47% { opacity: 1; }
50% { opacity: 0; }
97% { opacity: 0; }
100% { opacity: 1; }}
g[data-name="counterclockwise"] {
animation: 6s infinite;
animation-name: counter_animation;
transform-origin: 50% 50%;}
@keyframes counter_animation {
0% { opacity: 0; }
47% { opacity: 0; }
50% { opacity: 1; }
97% { opacity: 1; }
100% { opacity: 0; } }
</style>
</defs>
<g id="aeee668b-21ac-41e3-b248-485eb27a0a1b" data-name="action_arrow2" class="action_arrow2">
<circle id="b4485f64-ea17-46a9-bfb3-7702974cac03" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
<g id="a6f987a9-6dfa-4dd8-80b8-eecc39586c4c" data-name="circle_transparent">
<path id="a0aa0306-a048-4ba8-8272-84096ecec18f" data-name="circle" class="a6702ecc-977e-4ec2-8add-47217594510b" d="M34.32,28.39a40.83,40.83,0,1,1-5.76,57.46A40.88,40.88,0,0,1,34.32,28.39ZM83.49,88.52a36.84,36.84,0,1,0-51.84-5.2A36.9,36.9,0,0,0,83.49,88.52Z" transform="translate(-0.41 -0.24)"/>
<g id="a6bb816d-4d36-49e6-8262-1145b3d71b2a" data-name="clockwise">
<circle id="eedbf415-6006-412e-a444-1528a8300e18" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
<path id="e1f5490c-6a8d-44b8-8037-690f3b52b4d6" data-name="clockwise2" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M28.7,79.22A36.66,36.66,0,0,1,26.08,46l3.37,2,.15-12L19.16,41.88l3.46,2a40.66,40.66,0,0,0,2.66,37.38C26.2,82.81,29.52,80.57,28.7,79.22Z" transform="translate(-0.41 -0.24)"/>
<path id="b89a253a-bf5f-41b1-853f-ff16fbdae36a" data-name="clockwise1" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M91.75,40.89a36.66,36.66,0,0,1,2.62,33.23l-3.37-2-.15,12,10.44-5.86-3.46-2a40.61,40.61,0,0,0-2.67-37.37C94.25,37.31,90.93,39.54,91.75,40.89Z" transform="translate(-0.41 -0.24)"/>
</g>
<g id="ad441e68-0db6-43d4-b7b7-ab1edf7c8b4d" data-name="counterclockwise">
<circle id="ac342f71-48ac-449a-9aab-4699d3dd8ca4" data-name="frame" class="bf17fc5c-7924-499b-959f-404e7a5d6c84" cx="59.76" cy="59.76" r="59.74"/>
<path id="b9bdcf1a-9445-47b5-98dc-0c6920da0731" data-name="counterclockwise1" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M91.73,79.14A36.67,36.67,0,0,0,94.24,45.9l-3.36,2-.19-12,10.46,5.82L97.7,43.83a40.63,40.63,0,0,1-2.55,37.38C94.24,82.72,90.91,80.49,91.73,79.14Z" transform="translate(-0.41 -0.24)"/>
<path id="a9e3bd80-2516-438c-8f1e-55b8e13567ad" data-name="counterclockwise2" class="fbbc3ad0-37ae-41ab-8c9e-860970eb1313" d="M28.55,41A36.67,36.67,0,0,0,26,74.25l3.37-2,.18,12L19.14,78.38l3.45-2.06a40.67,40.67,0,0,1,2.54-37.39C26.05,37.43,29.37,39.66,28.55,41Z" transform="translate(-0.41 -0.24)"/>
</g>
</g> </g>
</svg>