傾斜画像アニメーションを繰り返し適用するには？

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); } 
} 

あなたが疑問を持っているなら、私に教えてください。