英文:
In CSS, can I use the same name for a CSS class and a CSS animation?
问题
以下是您提供的代码的翻译部分：
<style>
.wobble {
width: 75px;
height: 75px;
background: #777;
}
.wobble:hover {
animation-name: wobble;
animation-duration: 0.8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 100%;
-webkit-animation-name: wobble;
-webkit-animation-duration: 0.8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-transform-origin: 50% 100%;
}
@keyframes wobble {
0% {
-webkit-transform: none;
transform: none;
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
100% {
-webkit-transform: none;
transform: none;
}
}
</style>
<div class="wobble">Wobble</div>
请注意，这是您提供的HTML和CSS代码的翻译部分，不包括其他信息。
英文:
Or are there risks of conflicts ?
Example code provided
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<style>
.wobble {
width: 75px;
height: 75px;
background: #777;
}
.wobble:hover {
animation-name: wobble;
animation-duration: 0.8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 100%;
-webkit-animation-name: wobble;
-webkit-animation-duration: 0.8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-transform-origin: 50% 100%;
}
@keyframes wobble {
0% {
-webkit-transform: none;
transform: none;
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
100% {
-webkit-transform: none;
transform: none;
}
}
</style>
<div class="wobble">Wobble</div>
<!-- end snippet -->
答案1
得分: 1
我从未因为将class和@keyframes命名相同而出现错误。这与在HTML标签上具有相同名称的id和class是相同的概念。
除非与JavaScript中的类似情况（函数、变量名称等）发生冲突，否则不应该存在冲突。
英文:
I have never gotten an error for having a class and a @keyframes named the same thing. It is the same idea of having an id and a class with the same name on a HTML tag.
There should be no conflicts, unless there was a similar situation with JavaScript (functions, variable names, etc.).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论