我有HTML与动画的目标一个非常基本的片从display: none;到display: block不透明度变化的从0到1.
我正在使用Chrome浏览器,它使用-webkit前缀作为首选项,并进行了-webkit-keyframes转换设置以使动画成为可能.但是,它不起作用,只是改变display而不褪色.
我这里有一个JSFiddle .
<html>
<head>
<style type="text/css">
#myDiv
{
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
-webkit-transition: 350ms display-none-transition;
}
#parent:hover>#myDiv
{
opacity: 1;
display: block;
}
#parent
{
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}
@-webkit-keyframes display-none-transition
{
0% {
display: none;
opacity: 0;
}
1%
{
display: block;
opacity: 0;
}
100%
{
display: block;
opacity: …使用CSS我试图让转换延迟工作如下.我希望延迟1秒,但我希望0秒延迟.
transition: width 0.3s ease-in 1s;
transition: width 0.3s ease-out 0s;
我有以下jsFiddle
如何使悬停状态保持至少1秒？目前很难选择子菜单项,因为悬停状态过早消失.
这是jsFiddle.
我的HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div>
<span>Logo+Text</span>
</div>
<div class="btn-group has_dropdown" style="margin-left: 200px">
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">Sub List 1</a>
</li>
<li>
<a href="#">Sub List 2</a>
</li>
<li>
<a href="#">Sub List 3</a>
</li>
<li>
<a href="#">Sub List 4</a>
</li>
<li>
<a href="#">Sub List 5</a>
</li>
</ul>
</div>
</div>
</div>
</div>
和CSS:
#headerDropdown .dropdown:hover .dropdown-menu,
.btn-group:hover .dropdown-menu {
display: inline-flex !important;
}