0

I'm rebuilding someone's else CSS3 transition to make it work across Safari, Chrome, and Firefox. In their version (mouse over the package images), the transition works well in Safari, but not in the other two: The elements get stuck in the "up" position. In my version, the transition runs smoothly in FF and Chrome, but is jerky in Safari (plus it's not rotating). Any ideas? My CSS is below.

.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, transform .25s ease;
-moz-transition: margin .1s ease, transform .25s ease;
-o-transition: margin .1s ease, transform .25s ease;
transition: margin .1s ease, transform .25s ease;

}


.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, transform .25s ease-out;
-moz-transition: margin .1s ease, transform .25s ease-out;
-o-transition: margin .1s ease, transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;

}
5

3 Answers 3

Reset to default
1

While I agree that jQuery is not necessary for this problem, the real issue appears to be an inconsistent use of browser prefixes.

You needed to add prefixes for transform: rotate() on both .package-down and .package-up.

Also this:

-webkit-transition: margin .1s ease, transform .25s ease-out;

Should be this:

-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;

And it would be a similar adjustment for all the other prefixed transition properties.

See Codepen

$(function() {
	$('.package-down').hover(function() {
		$('.package-down').toggleClass('package-up');

		
		
	});
});
img {
  margin: 0;
  max-width: 100%;
}


.main-packages-wrapper {
  position: relative;
  width: 80%;
  min-height: 575px;
  display: block;
  padding-top: 80px;
  z-index: 1; }



  .package.original {
    margin-right: -15px;
    margin-left: -15px;
    z-index: 2; }
    
    
.package.original img {
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2); 
}

.package-down {
  display: block;
  position: relative;
  height: 100%;
  float: left;
  width: 33.333%;
  margin: 0 0 0 0;
  -webkit-transform: rotate(0deg) ;
  -moz-transform: rotate(0deg) ;
  -o-transform: rotate(0deg) ;
  transform: rotate(0deg) ;
  -webkit-transition: margin .1s ease, -webkit-transform .25s ease;
	-moz-transition: margin .1s ease, -moz-transform .25s ease;
	-o-transition: margin .1s ease, -o-transform .25s ease;
	transition: margin .1s ease, transform .25s ease;

   }


.package-up {
	 display: block;
  position: relative;
  height: 100%;
  float: left;
  width: 33.333%;
  margin: -50px 0 0 0;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
	transform: rotate(-2deg);
    -webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
	-moz-transition: margin .1s ease, -moz-transform .25s ease-out;
	-o-transition: margin .1s ease, -o-transform .25s ease-out;
	transition: margin .1s ease, transform .25s ease-out;
	
}

 
 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<body>
		<div class="primary-content">
		<section class="main-packages-wrapper">
			<div class="package-down multigrain">
				<a href="#"><img src="http://www.batterworld.com/wp-content/themes/batterworld/images/package_multigrain.png"></a>
			</div>
			
		</section>
		</div><!--END PRIMARY CONTENT-->

0

I'm actually astonished that your jQuery hover function does work at all, because what you'd actually need is mouseenter -> addClass and mouseleave -> removeClass, but it might be me not exactly being aware of how jQuery's .hover() works.

Nonetheless, there is absolutely no need for jQuery or even Javascript to change styles on mouseover. You have the pseudo-selector :hover for exactly this purpose: Put the styles your want to transition to into 

.package-down:hover { /* properties to transition to */ }

Next, do not repeat styles that the element already has and that do not change.

Last, if your problem is that not all property transition are taking an equal amount of time, don't specify so:

transition: margin .1s ease, transform .25s ease-out;

This will make the margin changes take 0.1s, but the rotation to take 0.25s.

Please describe more concisely what your transition is to look/perform like.

http://codepen.io/anon/pen/aOJmKe

Also, please be aware that you are not doing a css animation here, but a css transition. Read more about the differences here:

CSS: Animation vs. Transition

3
  • Thanks, @connexo, I will try the :hover fix later today. I appreciate it. The animation should be like so: 1. on hover, the package should margin or translate up in .1s and begin to rotate slightly 2. once the package makes it to the top position, it should continue to rotate by easing out, as the rotation should happen a little after the vertical move.
    – Aaron Joseph
    Commented Jun 2, 2015 at 19:55
  • Hope it works and you learnt a little. If this solves your problem, or helps you significantly to solve it yourself, please remember to click the checkmark left of the answer.
    – connexo
    Commented Jun 2, 2015 at 19:57
  • Yup, the javascript was definitely extraneous. All that was needed were CSS transitions applied to the :hover state of the elements. I did end up repeating some transition code, because that enabled the transitions to run in reverse when the cursor leaves the hovered element. Thanks! Finished codepen here.
    – Aaron Joseph
    Commented Jun 2, 2015 at 23:37
0

Yup, the javascript was definitely extraneous. All that was needed were CSS transitions applied to the :hover state of the elements. I did end up repeating some transition code, because that enabled the transitions to run in reverse when the cursor leaves the hovered element. Thanks! Finished codepen here.

.package.original img {
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);

      }


.package {
  display: block;
  position: relative;
  height: 100%;
  float: left;
  width: 33.33%;
    z-index: 1;
    -webkit-transition: margin .15s ease-out;
    -moz-transition: margin .15s ease-out;
    -o-transition: margin .15s ease-out;
    transition: margin .15s ease-out;

   }


.package:hover {
     display: block;
  position: relative;
  height: 100%;
  float: left;
  width: 33.33%;
    z-index: 1;
  margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
    -webkit-transition: margin .15s ease-out;
    -moz-transition: margin .15s ease-out;
    -o-transition: margin .15s ease-out;
    transition: margin .15s ease-out;

}


.original:hover{
    margin-left: -30px;
    -webkit-transition: margin .15s ease-out;
    -moz-transition: margin .15s ease-out;
    -o-transition: margin .15s ease-out;
    width: 33.33%;
    z-index: 2;

}

Not the answer you're looking for? Browse other questions tagged or ask your own question.