那些遇到过的问题

在 Firefox 中转换图像时会出现可怕的“振动”。为什么？

Ste*_*ieQ 5 css firefox css-transitions css-transforms

这与我之前问过的一个问题有关，但直到现在我才真正找到问题的根源。

我想要的是一个扩展到矩形的圆形。它的范围也从 0.9 到 1。

我所拥有的是这个http://codepen.io/StuffieStephie/full/zrZwEQ/我放慢了动画速度，因此“振动”更清晰。

    #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;
}
Run Code Online (Sandbox Code Playgroud)

它围绕其起源振动

为什么它会这样晃动，而且只有在 Firefox 中？添加供应商前缀没有帮助...

abl*_*lly 3

首先，原因很大程度上是背景图像。当所有浏览器尝试在两个方向上设置大小和位置的动画时，所有浏览器都会出现一点卡顿，只是 Firefox 丢失的帧数最少（射击？）。如果不知道这正是您正在制作的动画，就很难顺利地制作动画（因为像 GSAP 这样的 js 库就非常出色）。因此，您想要做的是a)一次只执行一个操作，或者b)通过仅对图像本身的大小进行动画处理来“伪造”它，并将动画的其余部分推送到图像周围的框架上。

因为图像居中，所以我们完全可以做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%;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<!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>
Run Code Online (Sandbox Code Playgroud)

或者在codepen上。

我将帧（.test静止图像）和图像（.img）分开，两者都包含在包装器（.imgwrapper）中。

包装器处理页面布局中的占用空间。

该框架的边框颜色现在专门针对卡片的背景进行了动画处理，并且定位（和border-width“d”）相当黑客……看看我是如何做到的，您就会明白我的意思。呵呵。

图片现在具有固定的宽度和位置，只有动画比例（因此不再卡顿）。

我 90% 确信有更好的方法来做到这一点，但是因为我必须对图像进行绝对定位（这样它的位置在框架移动时不会抽搐），所以我无法将 image-div 保留为子级框架分区的。

另外，我很惊讶它与生成带有圆角内角的正方形一样尴尬。我基本上只是做了一个非常厚的圆圈并说“只显示它的这个正方形”。

编辑注意：调整@media下面的宽度大小750px会导致偏离中心。禁用它“修复”它。当我把固定代码移到这里时才注意到，呵呵。

归档时间：

查看次数：

2967 次

最近记录：

9 年，9 月 前
相关归档
Bootstrap 3面板标题,按钮位置错误 116
如何在需要时通过HTTPS包含CSS和JS文件？ 77
透明的CSS背景颜色 70
使用JQuery扩展/折叠表行 61
HTML在浏览器选项卡上设置图像 42
如何使用动态宽度使用叠加层设置单个字符的一部分？ 21
全视口高度缩放div只是css no js ...可能吗？ 19
div上的动画边框 5
CSS滤镜打破3D变换 5
为什么我的 CSS3 转换在开始之前会延迟？ 1
难疑归档
在JavaScript中深度克隆对象的最有效方法是什么？ 5181
如何水平居中<div>？ 4116
撤消尚未推送的Git合并 3695
检查shell脚本中是否存在目录 3556
浮点数学是否破碎？ 2798
什么是反思,为什么它有用？ 2011
删除文件或文件夹 1910
在PostgreSQL中显示表格 1703
将文本粘贴到vim时关闭自动缩进 1119
使用node.js作为简单的Web服务器 1068