如何重複應用傾斜圖像動畫？

Question

我已經創建了一個片段。我想把這個形象反覆地傾向雙方。

.demo{ 
 
    text-align:center; 
 
    } 
 
.demo img{ 
 
width:50%; 
 
    }

<div class="demo"> 
 
    <img src="http://20dollarlogo.com/wp-content/uploads/2016/08/Logo_TV_2015.png" alt="Logo"> 
 
</div>

Answer 1

檢查，如果這符合您的要求。

var repeater; 
 
doWork(); 
 
function doWork() { 
 
repeater = setTimeout(doWork, 1000); 
 
if($('.demo .test').hasClass("flip")){ 
 
    $('.demo .test').removeClass('flip'); 
 
} 
 
else{ 
 
    $('.demo .test').addClass('flip'); 
 
} 
 
}

.demo{ 
 
    text-align:center; 
 
    } 
 
.demo img{ 
 
width:50%; 
 
    } 
 

 
.flip { 
 
     -moz-transform: scaleX(-1); 
 
     -o-transform: scaleX(-1); 
 
     -webkit-transform: scaleX(-1); 
 
     transform: scaleX(-1); 
 
     filter: FlipH; 
 
     -ms-filter: "FlipH"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="demo"> 
 
    <img class='test' src="http://20dollarlogo.com/wp-content/uploads/2016/08/Logo_TV_2015.png" alt="Logo"> 
 
</div>

Answer 2

你可以玩的transform: rotate();給你傾斜效果。這與CSS動畫結合應該會給你你正在尋找的東西。

這個解決方案最好的部分就是它純粹的CSS功能。

Codepen here

.demo img{ 
    width:50%; 
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ 
    transform: rotate(0deg); 
    animation-name: tilt; 
    animation-duration: 3s; 
    animation-iteration-count: infinite; 
} 

@keyframes tilt { 
    0% { transform: rotate(0deg); } 
    20% { transform: rotate(7deg); } 
    40% { transform: rotate(0deg); } 
    80% { transform: rotate(-7deg); } 
    100% { transform: rotate(0deg); } 
} 

讓我知道如果您有任何疑問。