如何重复应用倾斜图像动画？答案

【问题标题】：How to apply tilt image animation repeatedly?如何重复应用倾斜图像动画？
【发布时间】：2016-12-01 20:20:44
【问题描述】：

我创建了一个 sn-p。我想将该图像向两侧反复倾斜。

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

【问题讨论】：

你在说动画吗
是的，我想为它制作动画......
检查下面的sn-p

标签： jquery html css css-transitions

【解决方案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>

【讨论】：

【解决方案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); }
}

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

【讨论】：