在CSS中，我可以同时使用相同的名称来命名一个CSS类和一个CSS动画吗？

huangapple
go评论92阅读模式
英文:

In CSS, can I use the same name for a CSS class and a CSS animation?

问题

以下是您提供的代码的翻译部分：

  1. <style>
  2. .wobble {
  3.   width: 75px;
  4.   height: 75px;
  5.   background: #777;
  6. }
  7. .wobble:hover {
  8.   animation-name: wobble;
  9.   animation-duration: 0.8s;
  10.   animation-iteration-count: infinite;
  11.   animation-timing-function: linear;
  12.   transform-origin: 50% 100%;
  14.   -webkit-animation-name: wobble;
  15.   -webkit-animation-duration: 0.8s;
  16.   -webkit-animation-iteration-count: infinite;
  17.   -webkit-animation-timing-function: linear;
  18.   -webkit-transform-origin: 50% 100%;
  19. }
  21. @keyframes wobble {
  22.   0% {
  23.     -webkit-transform: none;
  24.     transform: none;
  25.   }
  26.   15% {
  27.     -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  28.     transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  29.   }
  30.   30% {
  31.     -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  32.     transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  33.   }
  34.   45% {
  35.     -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  36.     transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  37.   }
  38.   60% {
  39.     -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  40.     transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  41.   }
  42.   75% {
  43.     -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  44.     transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  45.   }
  46.   100% {
  47.     -webkit-transform: none;
  48.     transform: none;
  49.   }
  50. }
  51. </style>
  53. <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 -->

  1. &lt;style&gt;
  2. .wobble {
  3. width: 75px;
  4. height: 75px;
  5. background: #777;
  6. }
  7. .wobble:hover {
  8. animation-name: wobble;
  9. animation-duration: 0.8s;
  10. animation-iteration-count: infinite;
  11. animation-timing-function: linear;
  12. transform-origin: 50% 100%;
  13. -webkit-animation-name: wobble;
  14. -webkit-animation-duration: 0.8s;
  15. -webkit-animation-iteration-count: infinite;
  16. -webkit-animation-timing-function: linear;
  17. -webkit-transform-origin: 50% 100%;
  18. }
  19. @keyframes wobble {
  20. 0% {
  21. -webkit-transform: none;
  22. transform: none;
  23. }
  24. 15% {
  25. -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  26. transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  27. }
  28. 30% {
  29. -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  30. transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  31. }
  32. 45% {
  33. -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  34. transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  35. }
  36. 60% {
  37. -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  38. transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  39. }
  40. 75% {
  41. -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  42. transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  43. }
  44. 100% {
  45. -webkit-transform: none;
  46. transform: none;
  47. }
  48. }
  49. &lt;/style&gt;
  50. &lt;div class=&quot;wobble&quot;&gt;Wobble&lt;/div&gt;

<!-- 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.).

huangapple
  • 本文由 发表于 2023年4月20日 05:32:21
  • 转载请务必保留本文链接：https://go.coder-hub.com/76058962.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定