0

Consider the following CSS3 animation applied to a:focus, a:active:

@-webkit-keyframes pressed {
    0%, 100% { -webkit-transform : scale(1);
                       transform : scale(1); }
         50% { -webkit-transform : scale(2);
                       transform : scale(2); }
}
@keyframes pressed {    
    0%, 100% {         transform : scale(1); }
         50% {         transform : scale(2); }
}
a:focus, a:active {
    -webkit-animation : pressed 2s; 
            animation : pressed 2s; 
}

a {
          border : 1px solid silver;
         padding : 20px;
          height : 20px;
         display : inline-block;
           width : 100px;      
      background : #eee;
      text-align : center;
           color : dodgerBlue; 
 text-decoration : none;
}

body { padding : 50px; text-align: center;}
<a  href = "#">PRESS ME...</a>
<a  href = "#">...OR ME</a>

This is what happens:

On PC (every browser)

  • when CLICKING with the mouse, the <a> get the focus and executes its animation completely.

On iPad (tested on Chrome and Safari)

  • when TAPPING with the finger, the <a> get the focus and executes its animation only as long as the finger is KEPT DOWN. As soon as the finger is released, the animation stops.


This is strange, because the <a> should still have the focus...!

I'm not a mobile developer, so I guess I'm just missing something basic about mobile devices.

Why is the animation stopping when releasing the finger ? How can I prevent it ?

EDIT

I've noticed now that with THIS snippet on iPad the animation is not even starting (while on my web application it behaves as described in the question). It is probably related to the ontouchstart webkit sorcery, that I have in the site but not here, or with something on SO. The question however is still open: why it doesn't work on iPad, how to make it work on iPad ?

Community
  • 1
  • 1
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
  • Can you copy the snippet to this question? Then this one will still be valid if the other one changes. (Or you'd have to point people to the 4th version of the question in the edit history.) – Mr Lister Aug 04 '15 at 17:13
  • @MrLister Absolutely. I've created a better, smaller snippet reproducing the problem. Please check it out, thanks – Andrea Ligios Aug 05 '15 at 07:55
  • Probably not many iPad-using programmers on this site. I do have an Android pad, but it behaves the same as my PC. – Mr Lister Aug 05 '15 at 14:21
  • @MrLister thank you, at least you confirmed it works on Android (I'm still prototyping and don't even have an Android tablet to test it yet :) – Andrea Ligios Aug 05 '15 at 15:19

0 Answers0