Я взял некое решение моей задачи. При наведении на плавающую кнопочку, у меня с анимацией красиво появляется список других кнопок. Когда убираю курсор из этой области, список кнопок пропадает и всё ок. НО. Я хочу, чтобы они исчезали с какой-нибудь анимацией, например с такой же, как и появляются, только наоборот. Нужно придумать как-то без JS. Заранее спасибо за помощь.
Источник: http://androidcss.com/css/css3-floating-button-tutorial/
.float {
position: fixed;
width: 60px;
height: 60px;
bottom: 40px;
right: 40px;
background-color: #F33;
color: #FFF;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 3px #999;
z-index: 1000;
animation: bot-to-top 2s ease-out;
}
ul {
position: fixed;
right: 40px;
padding-bottom: 20px;
bottom: 80px;
z-index: 100;
}
ul li {
list-style: none;
margin-bottom: 10px;
}
ul li a {
background-color: #F33;
color: #FFF;
border-radius: 50px;
text-align: center;
box-shadow: 2px 2px 3px #999;
width: 60px;
height: 60px;
display: block;
}
ul:hover {
visibility: visible!important;
opacity: 1!important;
}
.my-float {
font-size: 24px;
margin-top: 18px;
}
a#menu-share+ul {
visibility: hidden;
}
a#menu-share:hover+ul {
visibility: visible;
animation: scale-in 0.5s;
}
a#menu-share i {
animation: rotate-in 0.5s;
}
a#menu-share:hover>i {
animation: rotate-out 0.5s;
}
@keyframes bot-to-top {
0% {
bottom: -40px
}
50% {
bottom: 40px
}
}
@keyframes scale-in {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes rotate-in {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotate-out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
<a href="#" class="float" id="menu-share">
<i class="fa fa-share my-float"></i>
</a>
<ul>
<li>
<a href="#">
<i class="fa fa-facebook my-float"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-google-plus my-float"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter my-float"></i>
</a>
</li>
</ul>