时间戳

首页 > 解决方案 > CSS Keyframes mouseout 反向浮动动画

html - CSS Keyframes mouseout 反向浮动动画

问题描述

keyframes悬停 a 时，我有一个CSS 动画div，将效果应用于 child img。我想反转浮动动画时mouseout改为跳转到初始状态，做出平滑的mouseout效果。

<section id="staff" style="padding-top: 100px;">
  <div class="col-lg-12 mx-auto mb-5">
    <div class="container">
      <div class="row icons-info">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
          <img class="floating" src="img/Muñeco 1-08.png" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 ">
          <img class="floating" src="img/Muñeco 2-08.png" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 ">
          <img class="floating" src="img/Muñeco 3-08.png" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros.</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
          <img class="floating" src="img/Muñeco 1-08.png" />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh justo, tincidunt sed felis vitae, egestas scelerisque eros. </p>
        </div>
      </div>
    </div>
  </div>
  </div>
  </div>
  </div>
</section>

CSS

.floating {
  outline: 1px solid transparent;
  transition: transform 3s linear;
}

.icons-info > *:hover img.floating {    animation-name: floating;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 15px); }
  to   { transform: translate(0, -0px); }    
}

标签： htmlcss

解决方案

推荐阅读