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;

}
connexo
  • 53,704
  • 14
  • 91
  • 128
Aaron Joseph
  • 51
  • 1
  • 7
  • Please provide a working fiddle so we can start to play with it. – connexo Jun 02 '15 at 19:39
  • @connexo User has provided a working CodePen with which you can fiddle. – TylerH Jun 02 '15 at 19:42
  • Hi @connexo, thanks! I included a codepen link, will that work? http://codepen.io/sistercylon/pen/BNWLZR – Aaron Joseph Jun 02 '15 at 19:42
  • possible duplicate of [IE9: Why setting "-ms-transform" works from css, but not with jquery.css()](http://stackoverflow.com/questions/5594117/ie9-why-setting-ms-transform-works-from-css-but-not-with-jquery-css) – TylerH Jun 02 '15 at 19:42
  • @TylerH Ah, I missed it in the text. Thanks for letting me know! – connexo Jun 02 '15 at 19:51

3 Answers3

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-->
Anne Gray
  • 99
  • 5
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

Community
  • 1
  • 1
connexo
  • 53,704
  • 14
  • 91
  • 128
  • 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 Jun 02 '15 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 Jun 02 '15 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.](http://codepen.io/sistercylon/pen/pJeRvg) – Aaron Joseph Jun 02 '15 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;

}
Aaron Joseph
  • 51
  • 1
  • 7