How to apply tilt image animation repeatedly?

Question

I have created a snippet. I want to tilt that image to both side repeatedly to both side.

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

are you talking about an animation here – Hudhaifa Yoosuf Dec 01 '16 at 11:50 — Hudhaifa Yoosuf, Dec 01 '16 at 11:50
Yes i want to animate it... – Navaneeth Venugopal Dec 01 '16 at 11:51 — Navaneeth Venugopal, Dec 01 '16 at 11:51
Check the below snippet – Hudhaifa Yoosuf Dec 01 '16 at 12:19 — Hudhaifa Yoosuf, Dec 01 '16 at 12:19

score 1 · Answer 1 · answered Dec 01 '16 at 12:17

Check if this meets your requirement.

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>

score 1 · Answer 2 · answered Dec 01 '16 at 12:20

You could play around with the transform: rotate(); to give you the tilt effect. This in conjucture with CSS animation should give you what you are looking for.

Best part about this solution is that its purely CSS power.

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

Let me know if you have any doubts.

How to apply tilt image animation repeatedly?

2 Answers2