如何在 CSS 中转换/动画菜单图标？

Posted 2023-03-06

【中文标题】如何在 CSS 中转换/动画菜单图标？

【英文标题】：How to transform/animate a menu icon in CSS?

【发布时间】：2018-05-11 21:00:42

【问题描述】：

我正在制作一个看起来类似于this 的 CSS 动画，而我几乎是 there，但我不知道如何让它正常工作。 对于不能或不想查看链接的每个人： 使用 CSS 我想要一个将三栏菜单图标转换为 X 的动画。我可以使“栏”重叠和旋转，但笔画远非对称。

这是我的代码： html：

<div class="container">
 <div class="centerized">    
  <div class="bar1"> </div>
  <div class="bar2"> </div>
  <div class="bar3"> </div>      
 </div> 
</div> 

SCSS：

@keyframes ani1
 0% margin-bottom: 16%; 
 50% margin-bottom: none; transform: translate(0, 20px); 
 100% margin-bottom: none; transform: rotate(30deg);


@keyframes ani2
 0% margin-bottom: 16%; opacity: 1; 
 75% margin-bottom: none; opacity: 0; 
 100% margin-bottom: none; opacity: 0; 


@keyframes ani3
 0% margin-bottom: 16%; 
 50% margin-bottom: none; transform: translate(0px, -20px); 
 100% margin-bottom: none; transform: rotate(-30deg); 

由于我认为问题在于我在动画期间放置元素的方式，因此我将这部分包括在内。要查看整个代码，我建议单击上面的链接。

【参考方案1】：

我将 CSS 添加到您的 html 以制作该动画。我猜你希望效果像在你的代码笔中一样悬停：

.You-need-this-container 
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  background: #3FAF82;
  color: #fff;


.container 
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);


.centerized 
  width: 80px;
  height: 52px;
  cursor: pointer;
  z-index: 50;


.centerized .bar1,
.centerized .bar2,
.centerized .bar3 
  height: 8px;
  width: 100%;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
  -webkit-transition: background-color .2s ease-in-out;
  transition: background-color .2s ease-in-out;


.centerized .bar1 
  -webkit-animation: animate-line-1-rev .7s ease-in-out;
  animation: animate-line-1-rev .7s ease-in-out;


.centerized .bar2 
  margin: 14px 0;
  -webkit-animation: animate-line-2-rev .7s ease-in-out;
  animation: animate-line-2-rev .7s ease-in-out;


.centerized .bar3 
  -webkit-animation: animate-line-3-rev .7s ease-in-out;
  animation: animate-line-3-rev .7s ease-in-out;


.centerized:hover .bar1,
.centerized:hover .bar2,
.centerized:hover .bar3 
  background-color: #fff;


.centerized:hover .bar1,
.centerized:hover .bar2,
.centerized:hover .bar3 
  background-color: #fff;


.centerized:hover .bar1 
  -webkit-animation: animate-line-1 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
  animation: animate-line-1 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;


.centerized:hover .bar2 
  -webkit-animation: animate-line-2 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
  animation: animate-line-2 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;


.centerized:hover .bar3 
  -webkit-animation: animate-line-3 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;
  animation: animate-line-3 0.7s cubic-bezier(0.3, 1, 0.7, 1) forwards;


.no-animation 
  -webkit-animation: none !important;
  animation: none !important;


@-webkit-keyframes animate-line-1 
  0% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  
  50% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(0);
    transform: translate3d(0, 22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
    transform: translate3d(0, 22px, 0) rotate(45deg);
  


@keyframes animate-line-1 
  0% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  
  50% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(0);
    transform: translate3d(0, 22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
    transform: translate3d(0, 22px, 0) rotate(45deg);
  


@-webkit-keyframes animate-line-2 
  0% 
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  
  100% 
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  


@keyframes animate-line-2 
  0% 
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  
  100% 
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  


@-webkit-keyframes animate-line-3 
  0% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  
  50% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(0);
    transform: translate3d(0, -22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
    transform: translate3d(0, -22px, 0) rotate(135deg);
  


@keyframes animate-line-3 
  0% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  
  50% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(0);
    transform: translate3d(0, -22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
    transform: translate3d(0, -22px, 0) rotate(135deg);
  


@-webkit-keyframes animate-line-1-rev 
  0% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
    transform: translate3d(0, 22px, 0) rotate(45deg);
  
  50% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(0);
    transform: translate3d(0, 22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  


@keyframes animate-line-1-rev 
  0% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(45deg);
    transform: translate3d(0, 22px, 0) rotate(45deg);
  
  50% 
    -webkit-transform: translate3d(0, 22px, 0) rotate(0);
    transform: translate3d(0, 22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  


@-webkit-keyframes animate-line-2-rev 
  0% 
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  
  100% 
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  


@keyframes animate-line-2-rev 
  0% 
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  
  100% 
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  


@-webkit-keyframes animate-line-3-rev 
  0% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
    transform: translate3d(0, -22px, 0) rotate(135deg);
  
  50% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(0);
    transform: translate3d(0, -22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  


@keyframes animate-line-3-rev 
  0% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(135deg);
    transform: translate3d(0, -22px, 0) rotate(135deg);
  
  50% 
    -webkit-transform: translate3d(0, -22px, 0) rotate(0);
    transform: translate3d(0, -22px, 0) rotate(0);
  
  100% 
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  

<div class="You-need-this-container">
  <div class="container">
    <div class="centerized">
      <div class="bar1"> </div>
      <div class="bar2"> </div>
      <div class="bar3"> </div>
    </div>
  </div>
</div>