Who knows how to make an animation like :hover but when moving the mouse?

A

Anton Volkov2019-01-03 23:18:53

css

Anton Volkov, 2019-01-03 23:18:53

I uploaded a website to hosting for clarity antonvolkov6666.000webhostapp.com .
In general, there is a smooth animation on hover, you need to make it so that when you move the mouse off the element, there is not a sharp, but the same smooth animation. Is there a pseudo class when moving the mouse down or will it have to be written in js
And another question is whether it is possible to do it in css so that when interacting with one element, another changes?

<!DOCTYPE html>
<html lang="ru">
<head>
  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> -->
  <meta charset="UTF-8">
  <title>test</title>
</head>
<style>
  *{
    
  }
  body{
    margin: 0;
    background: #FFD9D9;
  }
  #ads{
    background: #FFFFFF;
    width: 250px;
    height: 320px;
    margin: 40px;
    text-align: center;
    float: right;
    border-radius: 20px;
    font-family: Comic Sans MS;
    color: #333333;
  }
  #ads:hover{
    animation: animAdsCont .6s ease forwards;
  }
  #imgAds{
    background-image: url("iisakevski.jpg");
    background-size: cover;
    width: 210px;
    height: 200px;
    margin: auto;
    border-radius: 10px;
    margin-bottom: 15px;
    margin-top: 20px;
    filter: blur(1px);
  }
  #imgAds:hover{
    animation: animAdsimg 1.5s ease forwards;
    filter: blur(0px);
  }

  @keyframes animAdsimg{
    100%{
      width: 250px;
      height: 320px;
      margin-top: 0px;
      border-radius: 20px;
      color: rgba(0,0,0,0);
    }
  }
  @keyframes animAdsCont{
    100%{
      height: 250px;
      border-radius: 30px;
      color: rgba(0,0,0,0);
    }
  }

</style>
<body>
  <div id="wrapper">
    <div id="ads">
      <div id="imgAds"></div>
      Здесь должна быть ваша реклама
    </div>
  </div>
</body>
</html>

<script>
  
</script>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

Sergey Goryachev, 2019-01-03
@webirus

There is no class for antihover.
I’m not sure that keyframes are needed there at all, it’s quite possible to get by with the usual translate.
Then the animation will be smooth in both directions.
#ads{
translate: all 1s ease;
}
#ads:hover {
width: 250px;
height: 320px;
margin-top: 0px;
border-radius: 20px
color: rgba(0,0,0,0);
}

A

Andrey Antropov, 2019-01-04
@SanceiLaks

Everything is easier than it seems

.imglogo{
  margin: 0 0 0 200px;
    transition-property: all;
    transition: .9s
}
.imglogo:hover{
  -webkit-transform: scale(1.6);
  -ms-ransform: scale(1.6);
  transform: scale(1.6);
}

I threw my own, but I hope it's clear