CODEWITHSUNDEEP
jqueryhtmlcssanimation
hmahdavi
hmahdavi

Reputation: 2354

Why some animation does n't run for some icons when hover on parent element?

I created this website. In this website I have number of tabs that have icon.

Number of this icons, which are soap-icon, have animation, but number of icons that are icomoon-icon haven't animation. When I check in console I found that animation effect is assigned to this icons, but when I hover on the this icons it runs another effect.

How to solve this?

enter image description here

css:

.search-box-wrapper.style2 .search-box > ul.search-tabs li > a:hover i:before {
    -webkit-animation: toTopFromBottom 0.35s forwards;
    -moz-animation: toTopFromBottom 0.35s forwards;
    animation: toTopFromBottom 0.35s forwards;
}

Upvotes: 1

Views: 122

Answers (3)

ismapro
ismapro

Reputation: 162

It looks like you are applying the pseudo classes to the icons container not to the icon itself, the icons are in the :before pseudo element.

if you change:

[class^="icon-"], [class*=" icon-"]

for

[class^="icon-"], [class*=" icon-"], [class^="icon-"]:before, [class*=" icon-"]:before

all your icon- will work.

Upvotes: 1

Sunil Gehlot
Sunil Gehlot

Reputation: 1589

I have used line-height: 1em; and display: inline-block; for Icons, so now it works fine according to your need please use below css in your style.

.icon-insurance:before {
    content: "\e901";
    display: inline-block;
    line-height: 1em;
}
.icon-bus:before {
    content: "\e900";
    display: inline-block;
    line-height: 1em;
}
.icon-train:before {
    content: "\e902";
    display: inline-block;
    line-height: 1em;
}

Or you can use below code with single class :

.search-box-wrapper.style2 .search-box > ul.search-tabs li > a i:before {
    display: inline-block;
    line-height: 1em;
}

Upvotes: 1

t1m0n
t1m0n

Reputation: 3431

I've looked at your page and added line-height: 1em; and display: inline-block; to icons which are not animated, and everything started to work. 

.icon-insurance:before {
    content: "\e901";
    display: inline-block;
    line-height: 1em;
}

Maybe it will be more clear if you wrote how your animation method does look like, and which properties do you animate?

Upvotes: 2

Related Questions