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

时间：2017-11-28 11:54:58

标签： html css animation sass

我正在开发一个类似于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 个答案:

答案 0 :(得分：2)

我将CSS添加到你的html中以制作动画。我想你希望效果像你的codepen一样悬停：

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

相关问题
最新问题