Safari中的CSS3过渡不流畅
[英]css3 transition is not smooth in safari
问题描述
我正在重建其他人的CSS3过渡，以使其可以在Safari，Chrome和Firefox中使用。 在其版本中 （将鼠标悬停在包图像上），该过渡在Safari中效果很好，但在另两个版本中却没有：元素卡在“向上”位置。 在我的版本中 ，过渡在FF和Chrome中可以顺利运行，但在Safari中则比较不稳定（而且它不会旋转）。 有任何想法吗？ 我的CSS在下面。
.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;
}
3 个解决方案
解决方案1
1 2015-06-02 20:16:53
尽管我同意jQuery对于此问题不是必需的，但真正的问题似乎是浏览器前缀的使用不一致。
您需要为transform: rotate()添加前缀transform: rotate() .package-down和.package-up上的rotation transform: rotate() 。
还有这个：
-webkit-transition: margin .1s ease, transform .25s ease-out;
应该是这样的：
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
对于所有其他带前缀的过渡属性，这将是类似的调整。
$(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-->
解决方案2
0 已采纳 2015-06-02 19:50:54
我真的很惊讶您的jQuery悬停功能确实可以正常工作，因为您真正需要的是mouseenter -> addClass和mouseleave -> removeClass ，但是可能我不太清楚jQuery的.hover()是如何工作的。
尽管如此， 绝对不需要 jQuery甚至Javascript在mouseover上更改样式。 您可以使用伪选择器：hover来实现此目的：将要转换的样式放入
.package-down:hover { /* properties to transition to */ }
接下来，不要重复元素已经具有且不会改变的样式。
最后，如果您的问题是并非所有属性转换都花费相同的时间，请不要这样指定：
transition: margin .1s ease, transform .25s ease-out;
这将使边距更改花费0.1s，但旋转花费0.25s。
请更简洁地描述您的过渡效果/效果。
另外，请注意，您不是在此处制作CSS动画 ，而是在执行CSS过渡 。 在此处阅读有关差异的更多信息：
解决方案3
0 2015-06-02 23:38:53
是的，JavaScript绝对是多余的。 所需要做的只是将CSS过渡应用于元素的：hover状态。 我确实重复了一些过渡代码，因为当光标离开悬停的元素时，这使过渡可以反向运行。 谢谢！ 在这里完成了codepen。
.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;
}
CSS3动态更改动画时的平滑过渡
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.