CSSアニメーション（フラッター効果）

Question

フラッター効果アニメーションを実装しようとしています。 https://jsfiddle.net/kcbnw1Lx/3/

<div class="post photo"> 
    <div class="col1"> 
    <img src="https://2.img-dpreview.com/files/p/TC100x100S100x100~sample_galleries/2195357421/9191930200.jpg" class="lowes_logo" alt="Lowe's Home Improvement Logo"> 
    </div> 
    <div class="col2"> 
    <img src="https://pim-resources.coleparmer.com/item/s/arcis-ufl002b-sample-prep-kit-50-reactions-1320452.jpg" class="lowes_logo" alt="Lowe's Home Improvement Logo"> 
    </div> 
    <br> 
    <div class="col3"> 
    <img src="https://3.img-dpreview.com/files/p/TC100x100S100x100~sample_galleries/8541266682/9841279488.jpg" class="lowes_logo" alt="Lowe's Home Improvement Logo"> 
    <div class="col4"> 
     <img src="http://www.whosampled.com/static/user_images/r167890_201669_83041246780.jpg" class="lowes_logo" alt="Lowe's Home Improvement Logo"> 
    </div> 
    <span class="folded-corner"></span> 
    </div> 

ここで、この例では、それはホバー上の右上隅を折るされています。私はこの

https://jsfiddle.net/rdLwnrhw/4/

リファレンスを試してみました。しかし、私はホバリングをして1秒ごとに右下のdivを折ってみたい。

私を助けてください。

Answer 1

私はsetIntervalメソッドを追加して、別のclassメソッドを追加して、divの効果を追加して削除しました。

下記の実例を見ることができます。

var isOpened = false; 
 
setInterval(function() { 
 
    if (isOpened) { 
 
    document.getElementsByClassName("folded-corner")[0].className = "folded-corner"; 
 
    } else { 
 
    document.getElementsByClassName("folded-corner")[0].className = "folded-corner open"; 
 
    } 
 
    isOpened = !isOpened; 
 
}, 1000);

.photo { 
 
    height: 100%; 
 
    font-size: 0; 
 
    border: dashed #004990; 
 
    margin: 0 auto; 
 
    display: table; 
 
    font-family: sans-serif; 
 
} 
 

 
.col1, 
 
.col2, 
 
.col3, 
 
.col4 { 
 
    display: inline; 
 
} 
 

 
.post { 
 
    margin: 0px 0px 40px; 
 
    padding: 15px; 
 
    position: relative; 
 
    background-color: #fff; 
 
    box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset; 
 
} 
 

 
.photo { 
 
    padding: 0px!important; 
 
} 
 

 
.folded-corner { 
 
    width: 0px; 
 
    height: 0px; 
 
    transform: rotate(90deg); 
 
    position: absolute; 
 
    bottom: -1px; 
 
    right: -1px; 
 
    border-width: 0; 
 
    border-style: solid; 
 
    box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0, 0, 0, 0.1), -1px 1px 1px rgba(0, 0, 0, 0.1); 
 
    border-radius: 0 0 0 15px; 
 
    border-color: #fff #fff transparent transparent; 
 
    -webkit-transition: border-width 0.2s ease-out; 
 
    -moz-transition: border-width 0.2s ease-out; 
 
    -ms-transition: border-width 0.2s ease-out; 
 
    -o-transition: border-width 0.2s ease-out; 
 
    transition: border-width 0.2s ease-out; 
 
} 
 

 
.open { 
 
    border-width: 0 40px 40px 0; 
 
} 
 

 

 
}

<div class="post photo"> 
 
    <div class="col1"> 
 
    <img src="https://2.img-dpreview.com/files/p/TC100x100S100x100~sample_galleries/2195357421/9191930200.jpg" class="lowes_logo" alt="Lowe's Home Improvement Logo"> 
 
    </div> 
 
    <div class="col2"> 
 
    <img src="https://pim-resources.coleparmer.com/item/s/arcis-ufl002b-sample-prep-kit-50-reactions-1320452.jpg" class="lowes_logo" alt="Lowe's Home Improvement Logo"> 
 
    </div> 
 
    <br> 
 
    <div class="col3"> 
 
    <img src="https://3.img-dpreview.com/files/p/TC100x100S100x100~sample_galleries/8541266682/9841279488.jpg" class="lowes_logo" alt="Lowe's Home Improvement Logo"> 
 
    <div class="col4"> 
 
     <img src="http://www.whosampled.com/static/user_images/r167890_201669_83041246780.jpg" class="lowes_logo" alt="Lowe's Home Improvement Logo"> 
 
    </div> 
 
    <span class="folded-corner"></span> 
 
    </div>