CSS - フリップホバー効果は一度だけ発生する

私は効果を持つウェブサイトにsectionを持っています。クライアントは、がfront-to-backから1つの自動フリップに制限され、次にback-to-frontにカーソルが削除されてからが発生するのがclickであると尋ねました。基本的には、1回のサイト訪問でアクションが自動的に発生し続けることを望んでいません。私は彼らがユーザーがサイトをナビゲートしているときに起こっている場合、それは少し迷惑になるかもしれないと思っていると思う。これも可能ですか？もしそうなら、どうしたらいいですか？それが立つようCSS - フリップホバー効果は一度だけ発生する

は、ここでのコードだ -

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,800); 
 
body { 
 
    font-family: 'Montserrat', sans-serif !important; 
 
} 
 

 
#whatwedo { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 

 
/* Parallax flipping cards - Codepen */ 
 

 

 
/* *{ 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
} */ 
 

 
h1 { 
 
    font-size: 3rem; 
 
    font-family: 'Montserrat'; 
 
    font-weight: normal; 
 
    color: #000; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding-bottom: 0px; 
 
} 
 

 
.container-fluid { 
 
    /* width: 90%; */ 
 
    margin: 0px auto; 
 
    /* max-width: 80rem; */ 
 
} 
 

 
.cols { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
} 
 

 
.col-sm-3 { 
 
    /* width: calc(25% - 2rem); */ 
 
    /* margin: 1rem; */ 
 
    height: 300px; 
 
    width: 300px; 
 
    float: left; 
 
    margin: 0 20px 0 0; 
 
    /* padding: 10px; */ 
 
    cursor: pointer; 
 
} 
 

 
.container { 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-perspective: 1000px; 
 
    perspective: 1000px; 
 
} 
 

 
.front, 
 
.back { 
 
    background-size: cover; 
 
    background-position: center; 
 
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    text-align: center; 
 
    /* size of box */ 
 
    min-height: 300px; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 10px; 
 
    color: #000; 
 
    font-size: 1rem; 
 
} 
 

 
.back { 
 
    /* background: #fff; 
 
    background: -webkit-linear-gradient(45deg, #cedce7 0%,#596a72 100%); 
 
    background: -o-linear-gradient(45deg, #cedce7 0%,#596a72 100%); 
 
    background: linear-gradient(45deg, #cedce7 0%,#596a72 100%); */ 
 
} 
 

 
.front:after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 300px; 
 
    height: 300px; 
 
    content: ''; 
 
    display: block; 
 
    /* background shade - was .6 originally */ 
 
    opacity: .; 
 
    background-color: #fff; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    border-radius: 10px; 
 
    border: 0px solid; 
 
} 
 

 
.container:hover .front, 
 
.container:hover .back { 
 
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
} 
 

 
.back { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 300px; 
 
    font-size 1rem; 
 
    text-align: left; 
 
} 
 

 
.inner { 
 
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94); 
 
    transform: translateY(-50%) translateZ(60px) scale(0.94); 
 
    top: 50%; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    padding: 2rem; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    outline: 1px solid transparent; 
 
    -webkit-perspective: inherit; 
 
    perspective: inherit; 
 
    z-index: 2; 
 
} 
 

 
.container .back { 
 
    -webkit-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.container .front { 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.container:hover .back { 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.container:hover .front { 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.front .inner p { 
 
    font-size: 3rem; 
 
    margin-bottom: 2rem; 
 
    position: relative; 
 
} 
 

 
.front .inner p:after { 
 
    content: ''; 
 
    width: 4rem; 
 
    position: absolute; 
 
    background: #000; 
 
    display: block; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    bottom: ; 
 
}

<section id="whatwedo"> 
 
    <div class="container-fluid"> 
 
    <h1>What we do</h1> 
 

 
    <div class="cols"> 
 
     <div class="row"> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Brand Identity</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Graphic Design</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Editorial Design</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Brand Guidelines</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Print Management</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Signage</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Creative Direction</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Illustration & Animation</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

出典

2017-09-25 Mike.Whitehead

クラスをいくつか作成し、それにアニメーションを移動します。 JavaScriptでそのクラスを削除し、mouseroverが発生しているかどうかを確認するクラスを設定します。 –

JSでアニメーションを制御します。完了したらホバーattrを削除し、クリックイベントをバインドします。 – Aslam

これは、開始に役立ちます。

最初はホバーで動作します。あなただけのライブラリ "jQueryのフリップ" を使用jQueryのを使用して問題がない場合はクリック:)

var containers = document.querySelectorAll('.container'); 
 

 
containers.forEach(container => { 
 

 
    container.addEventListener('mouseenter', function() { 
 
    if (!container.classList.contains('flipcomplete')) { 
 
     container.classList.add('flipped'); 
 
    } 
 

 
    }); 
 
    container.addEventListener('mouseleave', function() { 
 
    if (!container.classList.contains('flipcomplete')) { 
 
     container.classList.remove('flipped'); 
 
     container.classList.add('flipcomplete'); 
 

 
    } 
 
    }); 
 
    
 

 
container.addEventListener('click', function() { 
 
    container.classList.toggle('flipped'); 
 

 
    }); 
 

 
});

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,800); 
 
body { 
 
    font-family: 'Montserrat', sans-serif !important; 
 
} 
 

 
#whatwedo { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 

 
/* Parallax flipping cards - Codepen */ 
 

 

 
/* *{ 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
      box-sizing: border-box; 
 
} */ 
 

 
h1 { 
 
    font-size: 3rem; 
 
    font-family: 'Montserrat'; 
 
    font-weight: normal; 
 
    color: #000; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding-bottom: 0px; 
 
} 
 

 
.container-fluid { 
 
    /* width: 90%; */ 
 
    margin: 0px auto; 
 
    /* max-width: 80rem; */ 
 
} 
 

 
.cols { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
} 
 

 
.col-sm-3 { 
 
    /* width: calc(25% - 2rem); */ 
 
    /* margin: 1rem; */ 
 
    height: 300px; 
 
    width: 300px; 
 
    float: left; 
 
    margin: 0 20px 0 0; 
 
    /* padding: 10px; */ 
 
    cursor: pointer; 
 
} 
 

 
.container { 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-perspective: 1000px; 
 
    perspective: 1000px; 
 
} 
 

 
.front, 
 
.back { 
 
    background-size: cover; 
 
    background-position: center; 
 
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    text-align: center; 
 
    /* size of box */ 
 
    min-height: 300px; 
 
    width: 300px; 
 
    height: 300px; 
 
    border-radius: 10px; 
 
    color: #000; 
 
    font-size: 1rem; 
 
} 
 

 
.back { 
 
    /* background: #fff; 
 
    background: -webkit-linear-gradient(45deg, #cedce7 0%,#596a72 100%); 
 
    background: -o-linear-gradient(45deg, #cedce7 0%,#596a72 100%); 
 
    background: linear-gradient(45deg, #cedce7 0%,#596a72 100%); */ 
 
} 
 

 
.front:after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    width: 300px; 
 
    height: 300px; 
 
    content: ''; 
 
    display: block; 
 
    /* background shade - was .6 originally */ 
 
    opacity: .; 
 
    background-color: #fff; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    border-radius: 10px; 
 
    border: 0px solid; 
 
} 
 

 
.container:hover .front, 
 
.container:hover .back { 
 
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1); 
 
} 
 

 
.back { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 300px; 
 
    font-size 1rem; 
 
    text-align: left; 
 
} 
 

 
.inner { 
 
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94); 
 
    transform: translateY(-50%) translateZ(60px) scale(0.94); 
 
    top: 50%; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    padding: 2rem; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    outline: 1px solid transparent; 
 
    -webkit-perspective: inherit; 
 
    perspective: inherit; 
 
    z-index: 2; 
 
} 
 

 
.container .back { 
 
    -webkit-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.container .front { 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.container.flipped .back { 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.container.flipped .front { 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
    /* -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; */ 
 
} 
 

 
.front .inner p { 
 
    font-size: 3rem; 
 
    margin-bottom: 2rem; 
 
    position: relative; 
 
} 
 

 
.front .inner p:after { 
 
    content: ''; 
 
    width: 4rem; 
 
    position: absolute; 
 
    background: #000; 
 
    display: block; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
    bottom: ; 
 
}

<section id="whatwedo"> 
 
    <div class="container-fluid"> 
 
    <h1>What we do</h1> 
 

 
    <div class="cols"> 
 
     <div class="row"> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Brand Identity</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Graphic Design</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Editorial Design</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Brand Guidelines</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Print Management</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Signage</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Creative Direction</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-3" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="container"> 
 
      <div class="front"> 
 
       <div class="inner"> 
 
       <p>Illustration & Animation</p> 
 

 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="inner"> 
 
       <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

出典

2017-09-25 11:15:14 Aslam

こんにちは、昨日ここの答えに感謝します。面白いことに、私が試してテキストエディタのファイルに実装すると、JavaScriptが機能しません。私はここで別のQをしてきました - https://stackoverflow.com/q/46406549/3521315 - それを止めているかも知れませんか？ –

あなたはおそらくからいくつかの情報を得ることができる：Run CSS3 animation only once (at page loading)

私はそれが唯一のCSSを使用しては不可能だと思います。 JavaScriptを追加して属性を切り替えた後、CSSで一度だけ使用することができます。

出典

2017-09-25 10:29:30 Saucistophe

のその後。

出典

2017-09-25 13:01:53

CSS - フリップホバー効果は一度だけ発生する

答えて

関連する問題