代码之家 › 专栏 › 技术社区 › Paddy Hallihan

CSS动画-淡入淡出

css-animations css html

Paddy Hallihan · 技术社区 · 6 年前

我试着在CSS的菜单上做一些动画。下面是代码,我必须让菜单淡入时,我悬停在标题。我还添加了类似的CSS淡出规则,但我不能让它以我想要的方式工作。

尝试了一些事情,但我能做的最好的是让它淡入,然后一旦它是在完全不透明,它再次淡出,直到动画结束,然后只是显示块,所以它基本上淡入淡出,然后才刚刚出现,好像没有动画。

ul{
  list-style:none;
  padding:0px;
  margin:0px;
}
ul >li >ul{
  display:none;
}
ul >li:hover >ul{
  display:block;
}

.fade_in {
  -webkit-animation-name: fade_in;
  -webkit-animation-duration: 1s;
  animation-name: fade_in;
  animation-duration: 1s;
}
@-webkit-keyframes fade_in {
  from {opacity: 0} 
  to {opacity: 1}
}
@keyframes fade_in {
  from {opacity: 0} 
  to {opacity: 1}
}

.fade_out {
  -webkit-animation-name: fade_in;
  -webkit-animation-duration: 1s;
  animation-name: fade_in;
  animation-duration: 1s;
}
@-webkit-keyframes fade_out {
  from {opacity: 1} 
  to {opacity: 0}
}
@keyframes fade_out {
  from {opacity: 1} 
  to {opacity: 0}
}

<ul>
  <li>Heading
    <ul class="fade_in">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

2 回复 | 直到 6 年前

connexo 6 年前

使用CSS要实现的目标要容易得多过渡而不是动画

transition: opacity .4s ease-in-out;

因为既不能设置动画也不能转换 display 属性,我已将默认状态从 display: none; opacity: 0; .

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul>li>ul {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  transition: opacity .4s ease-in-out;
}

ul>li:hover>ul {
  pointer-events: all;
  opacity: 1;
}

<ul>
  <li>Heading
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>

Joshua Doan 6 年前

你可以试试这样的

HTML格式

<div>Heading
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
</div>

CSS格式

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

div>ul {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s 1s, opacity 1s linear;
    overflow: hidden;
}

div:hover>ul {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    transition: opacity 1s linear;
}

推荐文章

Softly · 单选按钮未按预期取值

1 年前