CSS動畫（顫動效果）

Question

我想實現顫動效果動畫。我想這

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

參考：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> 

在這裏，在本例中，摺疊懸停右上角。但是我想每隔一秒鐘就把右下角的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>