There is the simplest animation:

@-webkit-keyframes port { from {opacity: 0;} to {opacity: 1;} } .port:hover .port_inf {-webkit-animation:port 1s;}

When we point at .port, we see .port_inf smoothly, but when we move the cursor away, the block disappears abruptly. And you need to make it also smoothly disappear. How to do it?

Thank you in advance!

  • Well, another problem is that after the animation is executed, the block disappears - inferusvv

1 answer 1

I would use this, especially cross-browser, but you do not have:

 .port .port_inf { opacity: 0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; } .port:hover .port_inf { opacity: 1; }
  • Properties with prefixes should go before unfixed. And yes. Lost -ms- and -o-. - ReklatsMasters
  • @ReklatsMasters by the way why? I always, of course, and put in the beginning with the prefixes, but I do just "like everyone else" - inferusvv
  • one
    @ inferus-vv: Because the browser takes into account the last specified element that it knows. Prefixes are made when the feature does not work well enough, or is experimental. When the browser supports both prefix and non-prefix, they can have different implementations, and if you specify a prefix one later, it will use the one that is not yet potentially finished. - pirj