0

По какой причине анимация может не работать?

Есть элементы списка в которые добавлены иконки с помощью иконочного шрифта (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);
    }
}

1 ответ 1

1

Попробуй добавить before элементу display: block; Или

i:after{
  transform: rotate(0);
  transition: all 1s ease;
}
i:hover:after{
  transform: rotate(360deg);
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.