Chrome中的CSS转换无法正常工作 [英] CSS transition doesn't work properly in Chrome

问题描述

我的CSS转换在Chrome中无法正常工作。它在Chrome中提供模糊效果，但在Firefox中运行良好。

以下是代码段圈子动画。我建议您在Chrome浏览器和屏幕最大宽度处查看此内容。

以下是HTML：

 <按钮>！充气< /按钮> 
< div class ='bubble'>< / div> 
  

CSS：

  .bubble {
 position：relative; 
 left：50px; 
 top：20px; 
 transform：scale（1）; 
 width：50px; 
 height：50px; 
 border-radius：50％; 
背景颜色：＃C00; 
 transition-origin：center; 
过渡：全部0.5秒; 
 overflow：hidden; 
} 
 
 .bubble.animate {
 transform：scale（30）; 
} 
 
 .bubble.ani {
 transform：scale（1）; 
 
 $ / code> 

JavaScript（jQuery）：
$ b $点击（功能（）{
$（'。bubble'）。addClass（'animate'）;
} ）; （）。
$ b $（'。buuble'）。click（function（）{
$（this）.removeClass（'animate'）;
$（this）.addClass（' ani'）;
}）;


解决方案

你几乎就是我亲爱的朋友。在我的浏览器中检查此笔，就像一个魅力。

但是，我建议您深入探讨供应商特定的CSS属性

这些链接肯定适合您：

跨浏览器转场： https：// css-tricks .com / almanac / properties / t / transition /

  .example {
 -webkit-transition：背景颜色500ms缓解1s; 
 -moz-transition：background-color 500ms缓出1s; 
 -o-transition：背景色500ms缓出1s; 
转换：背景色500ms解除1s; 
 
  

跨浏览器转换： https://css-tricks.com/almanac/properties/t/transform/

  .element {
 -webkit-transform：value; 
 -moz-transform：value; 
 -ms-transform：value; 
 -o-transform：value; 
 transform：value; 
} 
  

My CSS transition doesn't work properly in Chrome. It is giving a blur effect in Chrome but works fine in Firefox.

Here is the code snippet for circle animation. I recommend viewing this in Chrome and at the maximum width of your screen.

Here is the HTML:

<button>Inflate!</button>
<div class='bubble'></div>

CSS:

.bubble {
  position: relative;
  left: 50px;
  top: 20px;
  transform: scale(1);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #C00;
  transition-origin: center;
  transition: all 0.5s;
  overflow: hidden;
}

.bubble.animate {
  transform: scale(30);
}

.bubble.ani {
  transform: scale(1);
}

JavaScript (jQuery):

$('button').click(function() {
  $('.bubble').addClass('animate');
});

$('.buuble').click(function() {
  $(this).removeClass('animate');
  $(this).addClass('ani');
});

解决方案

You are almost there my dear friend. Checked this pen on my veriosn of Chrome, works like a charm.

However, I suggest you to deep dive into Vendor specific CSS properties when working on CSS Transitions and Transformations.

Here are some links which will definitely work for you:

Cross browser Transitions : https://css-tricks.com/almanac/properties/t/transition/

.example {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}

Cross browser Transformations: https://css-tricks.com/almanac/properties/t/transform/

.element {
      -webkit-transform: value;
      -moz-transform:    value;
      -ms-transform:     value;
      -o-transform:      value;
      transform:         value;
    }

这篇关于Chrome中的CSS转换无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！