如何反复应用倾斜图像动画？

Question

我创建了一个代码段。我想将图像反复向两侧倾斜。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

检查这是否符合您的要求。

＆＃13;

＆＃13;

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

＆＃13;

.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";
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

如果您有任何疑问，请告诉我。