Использование: Hover, чтобы запустить @keyframes animation, когда элемент использует несколько анимаций ⇐ CSS

[Anonymous]

У меня есть набор икон, которые переходят от центра страницы к установленной точке, а затем остаются там. Что я хочу сделать, так это установить их на переход, чтобы иметь более толстую границу и масштабировать до 130x130px всякий раз, когда я мышись над одним из них, но только начальная анимация < /p>

CSS: < /strong> < /p>

.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;
}
}
< /code>

и html: < /strong> < /p>














< /code>

Есть подсказки? < /p>

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