CODEWITHSUNDEEP
htmlcss
CeeJay
CeeJay

Reputation: 599

Why transition does not work?

I am trying to animate the yellow square when you mouse over it. I think I have tried nearly everything but it does not want to move. However, if I apply same transition and transform to the input field it starts to rotate. What is the problem here? Thanx for your help.

#sqre {
display: block;
width: 200px;
height: 200px;
background-color: gold;
border: 2px solid black;
transition: 1s;
}

#sqre:hover {
transform: rotateZ(360deg);
}
<input type="tel" name="numb" />
<div id="sqre">square</div>

Upvotes: 0

Views: 70

Answers (4)

Anmol Sandal
Anmol Sandal

Reputation: 1488

Hovers aren't possible on mobile devices as there is no persistent cursor - memory of the last touched point by default.

The only way they can sense interaction is touch, which is akin to a click or selection, so onclick in Javascript are other suitable opions for mobile.

$('#sqre').click(function() {
  $(this).toggleClass('toggle');
  $('#sqre').not(this).removeClass('toggle');
});
#sqre {
  display: block;
  width: 200px;
  height: 200px;
  background-color: gold;
  border: 2px solid black;
  transition: 1s;
}

#sqre.toggle {
  transform: rotateZ(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" name="numb" />
<div id="sqre">square</div>

Upvotes: 2

CeeJay
CeeJay

Reputation: 599

It does not work with the code I posted and it doesn't work with a -webkit- prefix either. It is really strange, cause input field transition works perfectly fine. Could it be safari mobile issue?

Upvotes: 0

Piyush
Piyush

Reputation: 81

It looks like the code you have used in the question is working just fine. You can see it in action below :

#sqre {
  display: block;
  width: 200px;
  height: 200px;
  background-color: gold;
  border: 2px solid black;
  transition: 1s;
}

#sqre:hover {
  transform: rotateZ(360deg);
}
<input type="tel" name="numb" />
<div id="sqre">square</div>

Also, if you are trying to achieve anything else, let us know.

Upvotes: 0

CaShiS
CaShiS

Reputation: 235

Look here I change rotateZ to -webkit-transform: rotate(360deg) and it works perfectly jsFiddle

Upvotes: 0

Related Questions