По какой причине анимация может не работать?
Есть элементы списка в которые добавлены иконки с помощью иконочного шрифта (i
элемент), нужно сделать что бы при наведении на элемент списка работала анимация на :before
этого самого i
элемента.
Пробовал делать в песочницах, все работало, но там было без использования иконочного шрифта.
div {
position: relative;
margin: 100px;
display: inline-block;
border: 1px solid red;
}
div:hover::after {
animation: anim 1s infinite ease;
}
div:after {
content: '';
position: absolute;
height: 15px;
width: 15px;
background-color: green;
top: 4px;
right: -20px;
}
@keyframes anim {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div>
some text
</div>
Если же делать тоже самое но не на i:before
, а просто на i
элемент, то все работает, но такой вариант не подходит, т.к. элемент i
имеет свою высоту, а иконки(Элемент i:before
) не выровнены по вертикали в родительском
элементе.
CSS самого иконочного шрифта.
@font-face {
font-family: "icon-font";
src:url("../fonts/icon-font.eot");
src:url("../fonts/icon-font.eot?#iefix") format("embedded-opentype"),
url("../fonts/icon-font.woff") format("woff"),
url("../fonts/icon-font.ttf") format("truetype"),
url("../fonts/icon-font.svg#icon-font") format("svg");
font-weight: normal;
font-style: normal;
}
[data-icon]:before {
font-family: "icon-font" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "icon-font" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
i {
display: inline-block;
}
Анимация не работает, хотя в браузере показано, что на этом элементе есть анимация
Сама структура HTML:
<ul>
<li><i class="icon-classic-game-gray"></i>Classic game</li>
<li><i class="icon-icon-case-gray"></i>Cases</li>
<li><i class="icon-double-game-gray"></i>Double game</li>
<li><i class="icon-icon-bang-gray"></i>Crash game</li>
<li><i class="icon-craft-gray"></i>Craft</li>
</ul>
Структура CSS(Less):
li {
display: inline-block;
font-size: 1.5rem;
color: @unActivColor;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
padding: 0 24px;
line-height: 30px;
&:nth-child(2) {
i {
&::before {
animation: classic-case 1s infinite ease;
}
}
}
&:nth-child(3) {
i {
&::before {
animation: rulette 1s infinite ease;
}
}
}
&:not(:last-child) {
border-right: 1px solid #3d3d3d;
}
i {
margin-right: 8px;
font-size: 1.8rem;
vertical-align: middle;
}
&:hover {
color: @activColor;
transition: 0.3s;
}
}
Сама анимация:
@keyframes rulette {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}