在 Firefox 中可怕地转换图像 "vibrating"。为什么？
Transforming image "vibrating" horribly in Firefox. Why?
这与我之前问过的一个问题有关，但直到现在我才真正找到问题的根源。
我想要的是一个展开成矩形的圆。它也从 .9 缩放到 1。
我有的是这个 http://codepen.io/StuffieStephie/full/zrZwEQ/ 我放慢了动画速度所以 "vibration" 更清晰。
#seasonOne .test {
padding:0;
background-color: #fff;
background: #fff url('http://i296.photobucket.com/albums/mm174/StuffieStephie/S1ChibiPreview2_zpsswyamase.png') 50% 50% no-repeat;
width: 200px;
height: 200px;
border-radius: 50%;
display: block;
margin: 0 auto;
-webkit-transition: 2s;
-moz-transition: 2s;
transition: 2s;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);
font-size: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#seasonOne:hover .test {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
width: 250px;
height: 200px;
border-radius: 0;
}
为什么只有在 Firefox 中才会这样晃动？添加供应商前缀没有帮助...
首先，原因几乎是背景图片。所有浏览器在尝试在两个方向上同时设置大小和位置时都会出现卡顿现象，只是 Firefox 丢掉的帧数最少 （开枪了？）。如果不知道你正在制作的动画是什么，就很难流畅地制作动画（原因是像 GSAP 这样的 js 库和它们一样好）。因此，你想要做的是 a) 一次只做一个或 b) "Fake" 它通过仅动画大小在图像本身上，并将动画的其余部分推到图像周围的框架上。
因为图片是居中的，我们完全可以做到B:
.season img {
float: left;
max-width: 500px;
width: 100%;
animation-delay:0.1s;
}
.season p.oneP {
animation-delay:0.5s;
}
.season p.twoP {
animation-delay:0.75s;
}
.season p.threeP {
animation-delay:1s;
}
.season h2 {
border-radius: 10px 10px 0 0;
background-color: #eee;
padding: 3px;
margin-top: 0;
overflow-x: hidden;
}
.season .smallText {
animation-delay:0.2s;
overflow: hidden;
}
.season h6, .season .arts, .season h3 {
text-align: center !important;
animation-delay: 1.8s;
}
.next, .prev {
float: right;
box-sizing: border-box;
width: 49%;
animation-delay: 3s;
border: 3px solid #EEE;
border-radius: 15px;
}
.prev {
float: left;
}
.prev img.preview, .next img.preview {
float: left;
}
.previews {
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card{
color: #ff2772;
border-radius: 15px;
margin: 3px 1px;
background-color: #2d3034;
box-sizing: border-box;
width: 300px;
min-height: 400px;
display: inline-block;
transition: .25s;
cursor:pointer;
border: 1px solid #ff2772;
text-align: center;
}
.floatRight {
float: right;
margin-right: 10px;
}
#page-content .card h6 {
padding: 10px 2px;
background: none;
border-radius: 10px 10px 0 0;
transition: .3s;
border-bottom: 1px solid #fff;
}
#page-content .card .smallText {
transition: .3s;
background: none;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
#page-content .card:hover .smallText, #page-content .card:hover h6{
background-color: #ff2772;
color: #2d3034;
}
.card:hover{
background: #fff;
}
/*
.card img {
width: 200px;
text-align: center;
border-radius: 100%;
background: #fff;
margin: 0 auto;
display: block;
transform: scale(.9);
transition: all .2s ease-in-out;
}
/*.card .test {
transform: scale(.9);
width: 200px;
height: 200px;
overflow-x: hidden;
display: block;
margin: 0 auto;
}
*/
.imgwrapper {
position:relative;
width:100%;
height:200px;
margin:0;
padding:0;
overflow:hidden;
}
#seasonOne .test {
padding:0;
background-color:rgba(0,0,0,0);
width: 200px;
height: 200px;
border-radius: 50%;
border-style:solid;
border-color: #2d3034;
border-width:80px;
display: block;
transition:all 2s, border-color 0.25s;
transform: scale(.9);
font-size: 0;
position:absolute;
z-index: 1;
top:-80px;
left:-30px;
}
#seasonOne .img{
background: #fff url('http://i296.photobucket.com/albums/mm174/StuffieStephie/S1ChibiPreview2_zpsswyamase.png') 50% 50% no-repeat;
/*Was gonna make that a dataURI, but that's 112KB. Heh.*/
width:250px;
height:200px;
transition: 2s;
transform: scale(.9);
position:absolute;
left:25px;
}
#seasonOne:hover .test {
width: 250px;
height: 200px;
transform: scale(1);
border-radius: 0;
border-color:#fff;
left:-55px;
}
#seasonOne:hover .img{
transform: scale(1);
}
.card:hover img{
transform: scale(1);
border-radius: 0;
}
hr {
margin: 0;
padding: 0;
}
img.preview {
transform: scale(.9);
width: 200px;
display: inline;
float: none;
border-radius: 10px;
transition: all .2s ease-in-out;
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
border-radius: 10px;
line-height: 0;
font-size: 0;
}
.art img.preview:nth-child(1) {
animation-delay: 2s;
}
.art img.preview:nth-child(2) {
animation-delay: 2.25s;
}
.logo{
clear:left;
padding-bottom: 10px;
}
img.preview:hover {
transform: scale(1);
box-shadow: 0 15px 15px rgba(0,0,0,0.3);
border-radius: 0;
}
.season img.no-float {
float: none;
}
@media screen and (max-width: 1200px) {
.season h6 {
clear: both;
}
}
@media screen and (max-width: 800px) {
.prev img.preview, .next img.preview {
float: left;
}
.season p {
clear: both;
}
.prev p, .next p {
clear: none;
}
.season img{
float: none;
margin: 0 auto;
text-align: center;
}
}
@media screen and (max-width: 750px) {
.card {
/*width: 49%;/*For this part to work, you'll have to do up more rules
*, otherwise you'll get an off-center image.*/
box-sizing: border-box;
}
}
@media screen and (max-width: 600px) {
.prev, .next{
width: 100%;
float: none;
margin: 5px auto;
}
.prev img.preview, .next img.preview {
}
}
@media screen and (max-width: 399px) {
.card{
width: 100%;
}
}
<!doctype html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/2.1.0/animate.min.css">
<!-- Magnific Popup core CSS file -->
<link href='http://fonts.googleapis.com/css?family=Quicksand:700|Montserrat:700|Open+Sans|Sniglet:400,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://kamicon.net/assets/styles/mainStyles.css">
<link rel="stylesheet"
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="site-canvas">
<div id="page-content">
<section>
<h1>Help Me!</h1>
<p>The art shakes horribly when you hover over it in Firefox Why!?</p>
<div id="area" class="holder"></div>
<div class="previews">
<div id="seasonOne" class="card seasonOne">
<h6 class="center">Season 1 (2009) - The Pilot</h6>
<div class="imgwrapper">
<div class="img"></div>
<div class="test"></div>
<div class="wrapper2"></div>
</div>
<p class="animated smallText fadeInRight oneP">Ut cursus purus in lacinia tincidunt. Quisque lorem odio, posuere ut aliquam vel, fringilla at enim. Duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.</p>
<a href="#area" class="button">Read More</a>
</div>
</div>
<hr/>
</section>
</div>
<!-- #page-content -->
</div>
<!-- #site-canvas -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
或者 codepen。
我将框架（.test 静止）和图像（.img）分开，两者都包含在包装器中（.imgwrapper）。
包装器处理页面布局中的足迹。
框架的 border-color 现在专门用卡片的背景制作动画，并且定位（和 border-width'd）相当古怪......看看如何我做到了，你会明白我的意思。呵呵
图片现在有固定的宽度和位置，只有动画比例（因此，不再卡顿）。
我 90% 确定有更好的方法来做到这一点，但是因为我必须 absolute-position 图像（所以它的位置不会在框架移动时抽动）我无法保留image-div 作为 frame-div 的 child。
另外，我很惊讶生成一个内角为圆角的正方形如此笨拙。我基本上只是画了一个很粗的圆圈然后说 "only show this square of it".
编辑注意：调整 @media 宽度低于 750px 导致了偏心。禁用它 "fixed" 它。把固定代码移到这里才发现，呵呵
这与我之前问过的一个问题有关，但直到现在我才真正找到问题的根源。
我想要的是一个展开成矩形的圆。它也从 .9 缩放到 1。
我有的是这个 http://codepen.io/StuffieStephie/full/zrZwEQ/ 我放慢了动画速度所以 "vibration" 更清晰。
#seasonOne .test {
padding:0;
background-color: #fff;
background: #fff url('http://i296.photobucket.com/albums/mm174/StuffieStephie/S1ChibiPreview2_zpsswyamase.png') 50% 50% no-repeat;
width: 200px;
height: 200px;
border-radius: 50%;
display: block;
margin: 0 auto;
-webkit-transition: 2s;
-moz-transition: 2s;
transition: 2s;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);
font-size: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#seasonOne:hover .test {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
width: 250px;
height: 200px;
border-radius: 0;
}
为什么只有在 Firefox 中才会这样晃动？添加供应商前缀没有帮助...
首先，原因几乎是背景图片。所有浏览器在尝试在两个方向上同时设置大小和位置时都会出现卡顿现象，只是 Firefox 丢掉的帧数最少 （开枪了？）。如果不知道你正在制作的动画是什么，就很难流畅地制作动画（原因是像 GSAP 这样的 js 库和它们一样好）。因此，你想要做的是 a) 一次只做一个或 b) "Fake" 它通过仅动画大小在图像本身上，并将动画的其余部分推到图像周围的框架上。
因为图片是居中的，我们完全可以做到B:
.season img {
float: left;
max-width: 500px;
width: 100%;
animation-delay:0.1s;
}
.season p.oneP {
animation-delay:0.5s;
}
.season p.twoP {
animation-delay:0.75s;
}
.season p.threeP {
animation-delay:1s;
}
.season h2 {
border-radius: 10px 10px 0 0;
background-color: #eee;
padding: 3px;
margin-top: 0;
overflow-x: hidden;
}
.season .smallText {
animation-delay:0.2s;
overflow: hidden;
}
.season h6, .season .arts, .season h3 {
text-align: center !important;
animation-delay: 1.8s;
}
.next, .prev {
float: right;
box-sizing: border-box;
width: 49%;
animation-delay: 3s;
border: 3px solid #EEE;
border-radius: 15px;
}
.prev {
float: left;
}
.prev img.preview, .next img.preview {
float: left;
}
.previews {
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card{
color: #ff2772;
border-radius: 15px;
margin: 3px 1px;
background-color: #2d3034;
box-sizing: border-box;
width: 300px;
min-height: 400px;
display: inline-block;
transition: .25s;
cursor:pointer;
border: 1px solid #ff2772;
text-align: center;
}
.floatRight {
float: right;
margin-right: 10px;
}
#page-content .card h6 {
padding: 10px 2px;
background: none;
border-radius: 10px 10px 0 0;
transition: .3s;
border-bottom: 1px solid #fff;
}
#page-content .card .smallText {
transition: .3s;
background: none;
border-bottom: 1px solid #fff;
border-top: 1px solid #fff;
}
#page-content .card:hover .smallText, #page-content .card:hover h6{
background-color: #ff2772;
color: #2d3034;
}
.card:hover{
background: #fff;
}
/*
.card img {
width: 200px;
text-align: center;
border-radius: 100%;
background: #fff;
margin: 0 auto;
display: block;
transform: scale(.9);
transition: all .2s ease-in-out;
}
/*.card .test {
transform: scale(.9);
width: 200px;
height: 200px;
overflow-x: hidden;
display: block;
margin: 0 auto;
}
*/
.imgwrapper {
position:relative;
width:100%;
height:200px;
margin:0;
padding:0;
overflow:hidden;
}
#seasonOne .test {
padding:0;
background-color:rgba(0,0,0,0);
width: 200px;
height: 200px;
border-radius: 50%;
border-style:solid;
border-color: #2d3034;
border-width:80px;
display: block;
transition:all 2s, border-color 0.25s;
transform: scale(.9);
font-size: 0;
position:absolute;
z-index: 1;
top:-80px;
left:-30px;
}
#seasonOne .img{
background: #fff url('http://i296.photobucket.com/albums/mm174/StuffieStephie/S1ChibiPreview2_zpsswyamase.png') 50% 50% no-repeat;
/*Was gonna make that a dataURI, but that's 112KB. Heh.*/
width:250px;
height:200px;
transition: 2s;
transform: scale(.9);
position:absolute;
left:25px;
}
#seasonOne:hover .test {
width: 250px;
height: 200px;
transform: scale(1);
border-radius: 0;
border-color:#fff;
left:-55px;
}
#seasonOne:hover .img{
transform: scale(1);
}
.card:hover img{
transform: scale(1);
border-radius: 0;
}
hr {
margin: 0;
padding: 0;
}
img.preview {
transform: scale(.9);
width: 200px;
display: inline;
float: none;
border-radius: 10px;
transition: all .2s ease-in-out;
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
border-radius: 10px;
line-height: 0;
font-size: 0;
}
.art img.preview:nth-child(1) {
animation-delay: 2s;
}
.art img.preview:nth-child(2) {
animation-delay: 2.25s;
}
.logo{
clear:left;
padding-bottom: 10px;
}
img.preview:hover {
transform: scale(1);
box-shadow: 0 15px 15px rgba(0,0,0,0.3);
border-radius: 0;
}
.season img.no-float {
float: none;
}
@media screen and (max-width: 1200px) {
.season h6 {
clear: both;
}
}
@media screen and (max-width: 800px) {
.prev img.preview, .next img.preview {
float: left;
}
.season p {
clear: both;
}
.prev p, .next p {
clear: none;
}
.season img{
float: none;
margin: 0 auto;
text-align: center;
}
}
@media screen and (max-width: 750px) {
.card {
/*width: 49%;/*For this part to work, you'll have to do up more rules
*, otherwise you'll get an off-center image.*/
box-sizing: border-box;
}
}
@media screen and (max-width: 600px) {
.prev, .next{
width: 100%;
float: none;
margin: 5px auto;
}
.prev img.preview, .next img.preview {
}
}
@media screen and (max-width: 399px) {
.card{
width: 100%;
}
}
<!doctype html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/2.1.0/animate.min.css">
<!-- Magnific Popup core CSS file -->
<link href='http://fonts.googleapis.com/css?family=Quicksand:700|Montserrat:700|Open+Sans|Sniglet:400,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://kamicon.net/assets/styles/mainStyles.css">
<link rel="stylesheet"
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="site-canvas">
<div id="page-content">
<section>
<h1>Help Me!</h1>
<p>The art shakes horribly when you hover over it in Firefox Why!?</p>
<div id="area" class="holder"></div>
<div class="previews">
<div id="seasonOne" class="card seasonOne">
<h6 class="center">Season 1 (2009) - The Pilot</h6>
<div class="imgwrapper">
<div class="img"></div>
<div class="test"></div>
<div class="wrapper2"></div>
</div>
<p class="animated smallText fadeInRight oneP">Ut cursus purus in lacinia tincidunt. Quisque lorem odio, posuere ut aliquam vel, fringilla at enim. Duis ligula lacus, viverra et sapien rhoncus, commodo euismod ipsum.</p>
<a href="#area" class="button">Read More</a>
</div>
</div>
<hr/>
</section>
</div>
<!-- #page-content -->
</div>
<!-- #site-canvas -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</body>
</html>
或者 codepen。
我将框架（.test 静止）和图像（.img）分开，两者都包含在包装器中（.imgwrapper）。
包装器处理页面布局中的足迹。
框架的 border-color 现在专门用卡片的背景制作动画，并且定位（和 border-width'd）相当古怪......看看如何我做到了，你会明白我的意思。呵呵
图片现在有固定的宽度和位置，只有动画比例（因此，不再卡顿）。
我 90% 确定有更好的方法来做到这一点，但是因为我必须 absolute-position 图像（所以它的位置不会在框架移动时抽动）我无法保留image-div 作为 frame-div 的 child。
另外，我很惊讶生成一个内角为圆角的正方形如此笨拙。我基本上只是画了一个很粗的圆圈然后说 "only show this square of it".
编辑注意：调整 @media 宽度低于 750px 导致了偏心。禁用它 "fixed" 它。把固定代码移到这里才发现，呵呵