ホバーがアニメーションを開始し、ホバーを停止するとバックワードになる

Question

アイコンを「開く」、「閉じる」のいずれかの方法があるのだろうかと思っていました。 アニメーションの上にマウスを置いて開始すると、その上にホバーオーバーすると元のアニメーションと同じアニメーションが再生されますが、最初のアニメーションが残されたポイントから開始します。 例： 画像を3秒間ホバーすると、ホバーオーバーを止めるまで停止しない5秒間のアニメーションが再生されます。アニメーション上でホバリングを停止すると、再生が終了しませんが、2秒から5秒までの逆のアニメーションが再生されます。

ありがとうございます。

Answer 1

これは、トランジションプロパティを使用してみましたか？例えば。次のスニペットを実行し、正方形の上にカーソルを置いて、あなたの探しているものかどうかを確認するために外に飛び出します。

.square { 
 
    margin: 50px auto 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 10px solid blue; 
 
    background: lightblue; 
 
    cursor: pointer; 
 
    transform: rotate(0deg); 
 
    
 
    transition: transform 2s; 
 
} 
 

 
.square:hover{ 
 
    transform: rotate(45deg); 
 
}

<div class="square"></div>

この情報がお役に立てば幸いです。

[最初のコメントに基づいて更新]

私はいくつかの時間が戻って、このようなjQueryと純粋なCSSの両方のソリューションを開発しました。それは、そのテキストコンテンツを明らかにするために開いた封筒を含んでいた。以下は、純粋なCSSのスニペットです。これはあなたと他の人がこれを探しているのに役立ちます。

body{ 
 
      margin: 0px; 
 
      padding:0px; 
 
     } 
 
     #envelope-bg { 
 
      position: relative; 
 
      overflow:hidden; 
 
     } 
 

 
     .envelope-container { 
 
      position: relative; 
 
      height: 405px; 
 
      width: 405px; 
 
      background: rgba(0, 0, 0, 0.1); 
 
      border-radius: 2px; 
 
      -ms-border-radius: 2px; 
 
      -moz-border-radius: 2px; 
 
      -o-border-radius: 2px; 
 
      -webkit-border-radius: 2px; 
 
     } 
 

 
      .envelope-container .envelope { 
 
       position: absolute; 
 
       height: 200px; 
 
       width: 200px; 
 
       left: 50%; 
 
       margin-left: -100px; 
 
       top: 50%; 
 
       margin-top: -100px; 
 
       background: #F9F9F9; 
 
       transform: rotate(-180deg); 
 
       transition: 2s ease all; 
 
       -ms-transition: 2s ease all; 
 
       -moz-transition: 2s ease all; 
 
       -o-transition: 2s ease all; 
 
       -webkit-transition: 2s ease all; 
 
       -webkit-backface-visibility: hidden; 
 
      } 
 

 
      .envelope-container:hover .envelope { 
 
       transition-delay: 150ms; 
 
       -ms-transition-delay: 150ms; 
 
       -moz-transition-delay: 150ms; 
 
       -o-transition-delay: 150ms; 
 
       transform: rotate(0deg); 
 
      } 
 

 
      .envelope-container .envelope .top { 
 
       position: absolute; 
 
       z-index: 20; 
 
       top: 0px; 
 
       left: 0px; 
 
       border-left: 100px solid transparent; 
 
       border-right: 100px solid transparent; 
 
       border-top: 100px solid #333; 
 
       transform-origin: top; 
 
       -ms-transform-origin: top; 
 
       -moz-transform-origin: top; 
 
       -o-transform-origin: top; 
 
       -webkit-transform-origin: top; 
 
       transition: transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, top 2s 0ms; 
 
       -ms-transition: -ms-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, top 2s 0ms; 
 
       -moz-transition: -moz-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, top 2s 0ms; 
 
       -o-transition: -o-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, top 2s 0ms; 
 
       -webkit-transition: -webkit-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, top 2s 0ms; 
 
      } 
 

 
      .envelope-container:hover .envelope .top { 
 
       transition: transform 2s 0ms, height 2s 150ms, top 2s 150ms; 
 
       -ms-transition: -ms-transform 2s 0ms, height 2s 150ms, top 2s 150ms; 
 
       -moz-transition: -moz-transform 2s 0ms, height 2s 150ms, top 2s 150ms; 
 
       -o-transition: -o-transform 2s 0ms, height 2s 150ms, top 2s 150ms; 
 
       -webkit-transition: -webkit-transform 2s 0ms, height 2s 150ms, top 2s 150ms; 
 
       height: 100px; 
 
       top: 0px; 
 
       transform: rotateX(180deg); 
 
       -ms-transform: rotateX(180deg); 
 
       -moz-transform: rotateX(180deg); 
 
       -o-transform: rotateX(180deg); 
 
       -webkit-transform: rotateX(180deg); 
 
      } 
 

 

 
      .envelope-container .envelope .right { 
 
       position: absolute; 
 
       z-index: 20; 
 
       top: 0px; 
 
       right: 0px; 
 
       border-right: 100px solid #333; 
 
       border-top: 100px solid transparent; 
 
       border-bottom: 100px solid transparent; 
 
       transform-origin: right; 
 
       -ms-transform-origin: right; 
 
       -moz-transform-origin: right; 
 
       -o-transform-origin: right; 
 
       -webkit-transform-origin: right; 
 
       transition: transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, right 2s 0ms; 
 
       -ms-transition: -ms-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, right 2s 0ms; 
 
       -moz-transition: -moz-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, right 2s 0ms; 
 
       -o-transition: -o-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, right 2s 0ms; 
 
       -webkit-transition: -webkit-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, right 2s 0ms; 
 
      } 
 

 
      .envelope-container:hover .envelope .right { 
 
       transition: transform 2s 0ms, width 2s 150ms, right 2s 150ms; 
 
       -ms-transition: -ms-transform 2s 0ms, width 2s 150ms, right 2s 150ms; 
 
       -moz-transition: -moz-transform 2s 0ms, width 2s 150ms, right 2s 150ms; 
 
       -o-transition: -o-transform 2s 0ms, width 2s 150ms, right 2s 150ms; 
 
       -webkit-transition: -webkit-transform 2s 0ms, width 2s 150ms, right 2s 150ms; 
 
       width: 100px; 
 
       right: 0px; 
 
       transform: rotateY(180deg); 
 
       -ms-transform: rotateY(180deg); 
 
       -moz-transform: rotateY(180deg); 
 
       -o-transform: rotateY(180deg); 
 
       -webkit-transform: rotateY(180deg); 
 
      } 
 

 
      .envelope-container .envelope .left { 
 
       position: absolute; 
 
       z-index: 20; 
 
       top: 0px; 
 
       left: 0px; 
 
       border-left: 100px solid #333; 
 
       border-top: 100px solid transparent; 
 
       border-bottom: 100px solid transparent; 
 
       transform-origin: left; 
 
       -ms-transform-origin: left; 
 
       -moz-transform-origin: left; 
 
       -o-transform-origin: left; 
 
       -webkit-transform-origin: left; 
 
       transition: transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, left 2s 0ms; 
 
       -ms-transition: -ms-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, left 2s 0ms; 
 
       -moz-transition: -moz-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, left 2s 0ms; 
 
       -o-transition: -o-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, left 2s 0ms; 
 
       -webkit-transition: -webkit-transform 2s 150ms, z-index 0ms 150ms, width 2s 0ms, left 2s 0ms; 
 
      } 
 

 
      .envelope-container:hover .envelope .left { 
 
       transition: transform 2s 0ms, width 2s 150ms, left 2s 150ms; 
 
       -ms-transition: -ms-transform 2s 0ms, width 2s 150ms, left 2s 150ms; 
 
       -moz-transition: -moz-transform 2s 0ms, width 2s 150ms, left 2s 150ms; 
 
       -o-transition: -o-transform 2s 0ms, width 2s 150ms, left 2s 150ms; 
 
       -webkit-transition: -webkit-transform 2s 0ms, width 2s 150ms, left 2s 150ms; 
 
       width: 100px; 
 
       left: 0px; 
 
       transform: rotateY(180deg); 
 
       -ms-transform: rotateY(180deg); 
 
       -moz-transform: rotateY(180deg); 
 
       -o-transform: rotateY(180deg); 
 
       -webkit-transform: rotateY(180deg); 
 
      } 
 

 
      .envelope-container .envelope .bottom { 
 
       position: absolute; 
 
       z-index: 20; 
 
       bottom: 0px; 
 
       left: 0px; 
 
       border-left: 100px solid transparent; 
 
       border-right: 100px solid transparent; 
 
       border-bottom: 100px solid #333; 
 
       transform-origin: bottom; 
 
       -ms-transform-origin: bottom; 
 
       -moz-transform-origin: bottom; 
 
       -o-transform-origin: bottom; 
 
       -webkit-transform-origin: bottom; 
 
       transition: transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, bottom 2s 0ms; 
 
       -ms-transition: -ms-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, bottom 2s 0ms; 
 
       -moz-transition: -moz-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, bottom 2s 0ms; 
 
       -o-transition: -o-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, bottom 2s 0ms; 
 
       -webkit-transition: -webkit-transform 2s 150ms, z-index 0ms 150ms, height 2s 0ms, bottom 2s 0ms; 
 
      } 
 

 
      .envelope-container:hover .envelope .bottom { 
 
       transition: transform 2s 0ms, height 2s 150ms, left 2s 150ms; 
 
       -ms-transition: -ms-transform 2s 0ms, height 2s 150ms, left 2s 150ms; 
 
       -moz-transition: -moz-transform 2s 0ms, height 2s 150ms, left 2s 150ms; 
 
       -o-transition: -o-transform 2s 0ms, height 2s 150ms, left 2s 150ms; 
 
       -webkit-transition: -webkit-transform 2s 0ms, height 2s 150ms, left 2s 150ms; 
 
       height: 100px; 
 
       bottom: 0px; 
 
       transform: rotateX(180deg); 
 
       -ms-transform: rotateX(180deg); 
 
       -moz-transform: rotateX(180deg); 
 
       -o-transform: rotateX(180deg); 
 
       -webkit-transform: rotateX(180deg); 
 
      } 
 

 
      .envelope-container:hover .envelope .envelope-inner { 
 
       background: #333; 
 
      } 
 

 
      .envelope-container .envelope .envelope-inner { 
 
       position: absolute; 
 
       height: 176px; 
 
       padding: 10px; 
 
       width: 176px; 
 
       top: 0px; 
 
       left: 0px; 
 
       background: #fff; 
 
       z-index: 10; 
 
       border:2px solid black; 
 
       transition: all 2s 0ms; 
 
       -ms-transition: all 2s 0ms; 
 
       -moz-transition: all 2s 0ms; 
 
       -o-transition: all 2s 0ms; 
 
       -webkit-transition: all 2s 0ms; 
 
       
 
      } 
 

 
      .envelope-container .envelope .envelope-inner p { 
 
       margin: 0; 
 
       position: absolute; 
 
       top: 50%; 
 
       left: 50%; 
 
       margin-right: -50%; 
 
       transform: translate(-50%, -50%); 
 
       color:#fff; 
 
       padding:10px; 
 
      }

<div id="envelope-bg"> 
 
    <div class="envelope-container"> 
 
     <div class="envelope"> 
 
      <div class="top"></div> 
 
      <div class="bottom"></div> 
 
      <div class="left"></div> 
 
      <div class="right"></div> 
 
      <div class="envelope-inner"> 
 
       <p>This is a test message. This is a test message. This is a test message</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>