正文 

当前位置： 首页 > 知识 >

带有 CSS 转换的圆形缩放动画 Chrome 错误

     2023-03-05     26

关键词：

【中文标题】带有 CSS 转换的圆形缩放动画 Chrome 错误【英文标题】：Circle scale animation Chrome bug with CSS transforms 【发布时间】：2013-02-23 00:47:33 【问题描述】：

我在 Chrome 中使用简单动画时遇到了一些问题。我正在研究一个非常简单的预加载器，它包含在一个可以及时增加其大小的圆圈中。这就是我创建它的方式：

#circle
position:absolute;
    display:block;
        width:40px;
    height:40px;
        background:#000;
    top:50%;
    left:50%;
    margin:-20px 0 0 -20px;

    -webkit-border-radius:50%;
     -khtml-border-radius:50%;
       -moz-border-radius:50%;
            border-radius:50%;

    -webkit-transform:scale(0.3);
       -moz-transform:scale(0.3);
        -ms-transform:scale(0.3);

    -webkit-animation:loading 1.5s ease-out forwards infinite;
       -moz-animation:loading 1.5s ease-out forwards infinite;
        -ms-animation:loading 1.5s ease-out forwards infinite;

还有这个动画：

@-webkit-keyframes loading 
    0%-webkit-transform:scale(0.3);
    50%-webkit-transform:scale(1); 
    100%-webkit-transform:scale(0.3);

这是结果，边缘仅在 Chrome 上被切断。 Safari，也使用 webkit 完美地呈现了这一点。 （注意顶部和左侧的切口）

还有最后一个问题。您将如何计划 IE 的图形回退？我的意思是，我可以要求 modernizr 并创建后备方案，删除它并通过 JS 添加图形。但我想知道一种仅使用 CSS 的更好方法。

动画在 IE 上不起作用，因此我们的想法是移除黑色圆圈并在其位置添加动画预加载器 gif。

希望你能帮忙，因为它让我发疯了！

非常感谢！

【问题讨论】：

我有完全相同的问题（但对我来说，它发生在底部和右侧）。有什么解决办法吗？ 【参考方案1】：

看起来它被它的容器隐藏了。

试试这个：

 #circle 
   margin:-19px 0 0 -19px;

【讨论】：

容器是100%/100%的层。只有这个元素单独设置在视口的中间。所以它可以被任何包装器裁剪。在 Opera、Safari 和 FF 上，它可以正常工作。只有在 Chrome Win/Mac 上才能以这种方式工作。还是谢谢！【参考方案2】：

问题与border-radius的属性有关，把圆改成svg图片。

【讨论】：

当使用 css3 缩放元素时，它会变成像素化，直到动画完成之后。我正在为带有边框的元素制作动画

...元素时，它会变成像素化，直到动画完成之后。我正在为带有边框的元素制作动画【英文标题】：whenscalinganelementwithcss3scale,itbecomespixelateduntiljustaftertheanimationiscomplete.I\'manimatinganelementwithaborder【发布时间】：2012-04-1616:36:00【问题... 查看详情

带有 CSS 布局/动画的 Chrome/jQuery 错误？解决方法？

】带有CSS布局/动画的Chrome/jQuery错误？解决方法？【英文标题】：Chrome/jQuerybugwithCSSlayout/animation?Workaround?【发布时间】：2011-10-2513:39:31【问题描述】：在Chrome中，元素的计算“top”属性可能与通过设置其样式指定的“top”属性不... 查看详情

带有 css3 过渡的角度淡入淡出动画

】带有css3过渡的角度淡入淡出动画【英文标题】：angularfadeanimationwithcss3transtions【发布时间】：2015-01-1714:58:33【问题描述】：我正在尝试使用ngAnimate和css3转换在单击链接时淡入/淡出div。我有以下内容，但它不起作用。div显示/隐... 查看详情

请帮我处理我的缩放 CSS 动画？

】请帮我处理我的缩放CSS动画？【英文标题】：Pleasehelpmewithmyscalecssanimation?【发布时间】：2022-01-0416:56:07【问题描述】：我有一个问题。我是CSS动画的新手，不知道为什么这在safari中不起作用。我正在尝试在img上制作我的成长动... 查看详情

Safari 上涉及不透明度、缩放和 translateY 问题的 CSS 动画

】Safari上涉及不透明度、缩放和translateY问题的CSS动画【英文标题】：CSSAnimationinvolvingopacity,scaleandtranslateYissueonSafari【发布时间】：2019-12-0405:22:48【问题描述】：我有一个放大和向下移动的三个箭头的动画，除了不透明度外，还... 查看详情

css动画之转换模块

2D转换模块：注意点：1.可以类似于过渡模块一样简写，但是这里不是用逗号隔开而是用空格2.2D的转换模块会修改元素的坐标系，所以旋转之后的平移就不是水平平移格式：旋转：transform:rotate(30deg)旋转角度平移：transform:translate(... 查看详情

CSS：为啥 chrome 中的字母在像素缩放中被不同的颜色包围？

...？【发布时间】：2016-07-1922:21:55【问题描述】：我有一个带有h1标头的bootstrapjumbotron。当我将h1标题更改为h2时，我发现周围的字母 查看详情

隐藏后的CSS无限动画未重置（Chrome）

...例子（你可以在thisDemo看到整个事情）代码将每1.4秒将img缩放到0.75并返回到原来的(1)比例。效果很好。然后我添加一个简单的jQuery代码来模拟错误：setTimeout( 查看详情

带有变换的css关键帧动画不适用于SVG

】带有变换的css关键帧动画不适用于SVG【英文标题】：csskeyframesanimationwithtransformnotworkingonSVG【发布时间】：2016-02-0709:51:36【问题描述】：当我尝试使用CSS关键帧动画为SVG文本设置动画时，它不会为变换属性设置动画。动画填充... 查看详情

css3动画之圆形运动轨迹

css3中通过@keyframes定义动画，animation设置动画属性，从而实现动画效果；在animation属性当中，可以规定动画的名称、整个动画的运行时间、运动的速度曲线以及其延迟时间、播放次数等。animationanimation作为一个复合属性，包括了... 查看详情

css32d转换3d转换以及动画的知识点汇总

css32d转换2d转换的方法：1、移动translate(x,y)可以改变元素的位置，x、y可为负值；2、缩放scale(x,y)可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；4、旋转rotate(deg)可以对元素进行旋转，正值为顺时针，... 查看详情

带有自动布局的新子视图的 iOS 7+ 缩放动画

】带有自动布局的新子视图的iOS7+缩放动画【英文标题】：iOS7+scaleanimationofnewsubviewwithautolayout【发布时间】：2015-08-0221:53:12【问题描述】：我正在尝试创建“弹出式”动画（视图的高度和宽度应该从0变为某个值），但到目前为止... 查看详情

纯css3实现圆形进度条动画

悄悄地，GIF格式的进度条已经越来越少，CSS进度条如雨后春笋般涌现。今天要介绍的这个CSS3进度条，效果和FlymeOS4上的加载动画一样。首先，来看下最终的效果：  查看详情

使用 css 动画更改悬停时的圆形背景

】使用css动画更改悬停时的圆形背景【英文标题】：Changecirclebackgroundonhoverusingcssanimation【发布时间】：2017-09-0110:00:53【问题描述】：我有一个圆圈，它的背景颜色设置为红色，我想使用css动画更改悬停时的背景，我该怎么做？... 查看详情

html带有css效果的圆形按钮(代码片段)

查看详情

带有 UIImagePickerController iOS 的圆形裁剪器相机？

】带有UIImagePickerControlleriOS的圆形裁剪器相机？【英文标题】：CircularCropperCamerawithUIImagePickerControlleriOS?【发布时间】：2015-09-2418:14:40【问题描述】：我正在使用带有cameraSource类型的UIImagePickerController。但我注意到有方形裁剪器而... 查看详情

css沿着圆形路径的动画-解决方案2(代码片段)

查看详情

css动画：移动缩放旋转倾斜的实现

移动属性：translate缩放属性：scale旋转属性：roate倾斜属性：skew html:定义五个属性进行比较，链入css文件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkhref="ss 查看详情