Adding a touch/swipe command to a CSS transition/animation

Question

I am trying to teach myself about swipe functions as in this day and age they are becoming more and more useful. I have a css animation below of a spinnning div. At the moment it just spins on hover but what I want to achieve is a spin on swipe/touch.

MY CSS ANIMATION

.trigger {
  width: 100%;
  height: 400px;
  background-color: white;
}

.hover-img {
  position: relative;
  width: 200px;
  height: 200px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  text-align: center;
  font-size: 0;
}

.trigger:hover>.hover-img {
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  transform: rotateY(360deg);
  font-size: 14px;
  color: white;
}

MY HTML

<div id="cell1">
<div class="trigger">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
    </div>
</div>
<br><br><br><br>
<div class="trigger">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
    </div>
</div>
</div>

This is a JS Fiddle showing what I currently have.

This is a livelink of where I am using this animation, I shall delete this as soon as the question is answered for future posterity of this post.

UPDATED CSS FOR L.H

.trigger {
  width: 100%;
  height: 400px;
  background-color: white;
}

.hover-img:active {
  background-color: green;
  position: relative;
  width: 200px;
  height: 200px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-transform-style: preserve-3d;
  text-align: center;
  font-size: 0;
}

.trigger:hover>.hover-img:active {
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  transform: rotateY(360deg);
  font-size: 14px;
  color: white;
}

UPDATED HTML

<body ontouchstart="">

<div id="cell1">
<div class="trigger">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
    </div>
</div>
<br><br><br><br>
<div class="trigger">
    <div tabindex="0" class="maincontentdiv4 hover-img" style="box-shadow: 5px 5px 5px #999; height: 390px; background-image: url(slide2.png);">ffffffffffff
    </div>
</div>
</div>

score 0 · Answer 1 · answered Oct 24 '14 at 11:01

0

I know you wrote that you want to learn how to handle the touch and swipes yourself which is cool. Also I know that there might be a lot of work ahead if you want a reliable solution why I want you to check out the Modernizr library already provided.

Please check this out: http://www.hongkiat.com/blog/detect-touch-device-modernizr/

If you really want to do the low-level code yourself you might at least be inspired from the Modernizr lib.

All the best.

answered Oct 24 '14 at 11:01

L.H

325
1
7

It looks sooo complicated thats not gonna fix this situation at the moment. Thats a weekend reading about it. I'll do that tomorrow haha! Is there a fix for my problem right now? – DanielNolan Oct 24 '14 at 11:35
Apparently there is a little "hack" to achieve it easier. You can use the :active pseudo selector in css for styling what should happen. Then you can put the ontouchstart="" and onmouseover="" attributes to the element you want to trigger the :active event. See: http://stackoverflow.com/questions/8330559/hover-effects-using-css3-touch-events Havent tested this tho. – L.H Oct 24 '14 at 11:42
This only seems to work if I hold down my finger on the ipad as soon as I release it disappears again :( thanks though – DanielNolan Oct 24 '14 at 11:50
No worries - of course, I will have a look at your livelink now :) – L.H Oct 24 '14 at 11:52
haha after putting that code in, it will not spin on hover now on a desktop pc, however on a ipad it spins like a crazy div on roids but only if I hold it down :/ wagwan! – DanielNolan Oct 24 '14 at 11:55
I can't seem to find the updated version anywhere. Anyways: Did you remove your old css styling? – L.H Oct 24 '14 at 11:58
Added above in original question @L.H – DanielNolan Oct 24 '14 at 12:03
Ohh I believe you should place the ontouchstart="" in your
and not the body tag. Try putting it either on the trigger div or the inner div of the trigger. - This fires the event that triggers your :active styling
– L.H Oct 24 '14 at 12:07
right ive got it working but its extremely temperamental touching one div opens another div etc and then you try it about 5 times before it turns. Its just not very good. Ill try to find another way :( @L.H – DanielNolan Oct 24 '14 at 12:26

Adding a touch/swipe command to a CSS transition/animation

1 Answers1