Использование :hover для запуска анимации @keyframes, когда элемент использует несколько анимаций. ⇐ CSS

[Anonymous]

У меня есть набор значков, которые переходят из центра страницы в заданную точку, а затем остаются там. Я хочу установить для них переход, чтобы они имели более толстую рамку и масштабировались до 130x130 пикселей всякий раз, когда я наводил курсор мыши на один из них, но происходит только начальная анимация

CSS:

Код: Выделить всё

.iconborder {
border-width: 5px;
border-style: solid;
border-radius: 100em;
border-color: white;
}

.iconborder:hover {animation-name: icongrow; animation-duration: 0.2s; animation-timing-function: cubic-bezier;}

@keyframes icongrow {
0% {
border-width: 5px;
width: 100px;
height: 100px;
}

100% {
border-width: 10px;
width: 130px;
height: 130px;
}
}

#FTPSlideOut
{
position: fixed;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 6;
visibility: hidden;

animation-name: FTPSlideOut;
animation-duration: 0.4s;
animation-timing-function: cubic-bezier;
animation-delay: 1s;
animation-fill-mode: forwards;

}

@keyframes FTPSlideOut {
0% {
transform: translate(0px, 0px);
visibility: visible;
}

100% {
transform: translate(-300px, -150px);
visibility: visible;
}
}

И HTML:

Код: Выделить всё

    
[img]picCenterDotFinalwText.png[/img]
[url=/net2ftp]
[img]FTP.png[/img]
[/url]
[img]Pictures.png[/img]
[img]Videos.png[/img]
[img]Music.png[/img]
[img]Documents.png[/img]
[url=https://www.gmail.com]
[img]Email.png[/img]
[/url]

Есть подсказки?

Подробнее здесь: https://stackoverflow.com/questions/214 ... tiple-anim