Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >检测属性是否可以通过CSS3变换设置动画?

检测属性是否可以通过CSS3变换设置动画?
EN

Stack Overflow用户
提问于 2011-01-13 10:59:11
回答 2查看 2.3K关注 0票数 6

可以使用CSS3过渡设置动画效果的属性列表在不同的浏览器中并不一致,并且可能会随着新的浏览器版本而发生变化。例如,-moz变换在FF3.6中不能使用-moz变换设置动画,但它在FF4中。

那么,有没有一种方法可以在JavaScript中检测特定属性是否可设置动画?我不喜欢使用用户代理嗅探,因为它不可靠。

提前感谢!

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-01-13 13:00:20

编辑:有关检测动画属性的好技术,请参阅

恐怕没有直接的方法来检测属性是否可设置动画。然而,属性在很大程度上是一致的(我遇到的唯一问题是FF4转换+文本阴影+转换)。

http://www.w3.org/TR/css3-transitions/#the-transition-property-property-#properties-from-css-

Firefox 3.6不支持css转换,你可以用一个js库检测到这一点,比如:

http://www.modernizr.com/

票数 3
EN

Stack Overflow用户

发布于 2012-06-26 22:49:07

是的,有一种方法。演示如下,解释如下。涉及到一些非常重要的警告,所以一定要继续往下读。

下面的代码将测试浏览器是否可以在两个值之间设置动画。

代码

jsFiddle demo

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/*
@param property  The property to test.
@param from      A valid starting value for the animation.
@param to        A valid ending value for the animation.
@param [element] The element to test with. (Required for testing
                 properties with prerequisites, e.g. "top" requires
                 non-static position.)
*/
function isAnimationSupported(property, from, to, element) {
    var doc = document.documentElement,
        style = doc.appendChild(document.createElement("style")),
        rule = [
                'capTest{',
                    '0%{',   property, ':', from, '}',
                    '100%{', property, ':', to,   '}',
                '}'
               ].join(''),
        propCamel = property.toCamelCase(),
        prefixes = 'moz ms o webkit '.split(' '), // Unprefixed last, see comments.
        prefixCount = prefixes.length,
        canAnimate = false;

    element = doc.appendChild((element)
            ? element.cloneNode(false)
            : document.createElement('div'));

    // Detect invalid start value. (Webkit tries to use default.)
    element.style[propCamel] = to;

    // Iterate through supported prefixes.
    for (var i = 0; i < prefixCount; i++) {

        // Variations on current prefix.
        var prefix  = prefixes[i],
            hPrefix = (prefix) ? '-' + prefix + '-' : '',
            uPrefix = (prefix) ? prefix.toUpperCase() + '_' : '';

        // Test for support.
        if (CSSRule[uPrefix + 'KEYFRAMES_RULE']) {

            // Rule supported; add keyframe rule to test stylesheet.
            style.sheet.insertRule('@'+ hPrefix + 'keyframes ' + rule, 0);

            // Apply animation.
            var animationProp = (hPrefix + 'animation').toCamelCase();
            element.style[animationProp] = 'capTest 1s 0s both';

            // Get initial computed style.
            var before = getComputedStyle(element)[propCamel];

            // Skip to last frame of animation.
            // BUG: Firefox doesn't support reverse or update node style while
            // attached.
            doc.removeChild(element);
            element.style[animationProp] = 'capTest 1s -1s alternate both';
            doc.appendChild(element);
            // BUG: Webkit doesn't update style when animation skipped ahead.
            element.style[animationProp] = 'capTest 1s 0 reverse both';

            // Get final computed style.
            var after = getComputedStyle(element)[propCamel];

            // If before and after are different, property and values are animable.
            canAnimate = before !== after;
            break;
        }
    }

    // Clean up the test elements.
    doc.removeChild(element);
    doc.removeChild(style);

    return canAnimate;
}

// Cribbed from Lea Verou's prefixfree.
String.prototype.toCamelCase = function() {
    return this.replace(/-([a-z])/g, function($0, $1) { return $1.toUpperCase(); })
               .replace('-','');
};

如何使用

它的强制参数是要动画的属性以及它应该采用的起始值和结束值。可选的,你可以传递一个设置了其他初始样式的元素,例如position: absolute。(该函数克隆元素,因此您可以传递文档中的节点,并且这些节点不会被更改。)如果您没有传递任何元素,动画将在UA应用的任何默认样式的div上进行测试。

它是如何工作的

关键帧动画规则将添加到虚拟样式表中,其中初始帧设置为from值,最后一帧设置为to值。此动画应用于元素。然后,我们检查动画属性的计算样式,以查看动画从初始帧开始时与从最终帧开始时是否不同。

这样做的原因是,变换和关键帧动画的可动画属性是相同的,并且如果该属性支持动画,浏览器将仅应用关键帧值。

注意事项(在使用之前,请阅读其中一些令人讨厌的内容!)

浏览器处理动画的方式有几个不一致之处。其中几个我已经解决了,作为一种可能的面向未来的方法;然而,其中一些是难以处理的。

最值得注意的是,火狐补间静态元素的位置值(例如left),而其他的(例如Webkit和Opera)则不是。它实际上不会移动元素,但会更新该属性的值。因此,如果您尝试在不传递非静态定位元素的情况下对位置值进行动画处理,您将在不同的浏览器中获得不同的结果。

支持CSS过渡的主要浏览器的最新版本也支持CSS关键帧,尽管一些较旧的版本支持前者,但不支持后者。(例如,Opera 11。)

最后,如果我要更优雅地做这件事,我将使用prefixfree来确定要直接使用的正确前缀;目前,我对前缀数组进行测试,从无前缀版本开始。

票数 9
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4679288

复制
相关文章
【CSS3】CSS3 动画 ③ ( 动画属性 | CSS3 常见动画属性简介 | 动画属性简写方式 | 动画属性简写语法 | 代码示例 )
在 @keyframes 定义的动画中 , 可以设置一系列的 CSS 属性 , 用于控制动画的运行 , 常见的属性如下 : ( 下面的动画属性是设置在 执行动画 的 标签元素 样式中的 )
韩曙亮
2023/10/15
4660
【CSS3】CSS3 动画 ③ ( 动画属性 | CSS3 常见动画属性简介 | 动画属性简写方式 | 动画属性简写语法 | 代码示例 )
CSS3 动画属性
CSS3 动画 虽然transition在一定的时间内可以实现元素的初始状态在指定的时间范围过渡最终状态, 模拟一种过渡动画效果,但它的功能是非常有限的。 因此,CSS3 新增了一个动画属性animation。与过渡属性transition属性不同的是,CSS3 的animation属性可以像Flash制作动画一样,通过关键帧控制动画的每一步, 实现更为复杂的动画效果。 CSS3中通过animation实现动画和transition实现动画非常类似,都是通过改变元素的属性值来实现动画效果的。 它们的区别主要在于:使用 transition属性只能通过指定属性的初始状态和结束状态,然后在两个状态之间进行平滑过渡的方式来实现动画。 而animation实现动画效果主要由两个部分组成: 1). 通过类似Flash动画中的关键帧来声明一个动画; 2). 在animation属性中调用关键帧声明的动画,从而实现一个更为复杂的动画效果。 CSS3动画属性animation和CSS3的transition属性一样是一个复合属性,它包含了8个属性: animation-name,主要用来指定一个关键帧动画的名字,这个动画名必须对应一个@keyframes规则。CSS加载时会应用animation-name指定的动画, 从而执行动画。 animation-duration,主要用来设置动画播放所需时间,一般以秒为单位。 animation-timing- function主要用来设置动画的播放方式,与transition-timing-function类似。 http:/ /www.iis7.com/b/wzjk/ animation-delay、主要用来指定动画开始时间,一般以秒为单位。 animation-iteration- count、主要用来指定动画播放的循环次数。 animation-direction、主要用来指定动画的播放方向。 animation-play- state,主要用来控制动画的播放状态。 animation-fill- mode,主要用来设置动画的时间外属性。br/>:关键帧 在CSS3中,把@keyframes称为关键帧 @keyframes 的作用: transition制作一个简单的动画效果时,包括了元素的初始属性和最终属性,一个开始执行动作时间和一个延迟动作时间以及一个动作变换速率, 其实这些值都是一个中间值,如果要控制得更细一些,比如说要第一个时间段执行什么动作,第二个时间段执行什么动作(换到Flash制作动画中来说,就是第一帧要执行什么动作,第二帧执行什么动作), 这样用transition 就很难实现了,此时也需要一个“ 关键 帧”来控制。 在CSS3中就是通过@keyframes属性来实现这样的效果的。br/>@keyframes的语法: @keyframes具有其自己的语法规则,命名是由@keyframes开头,后面紧跟着是“动画的名称”加上一对花括号“{...}”,括号中就不同时间段样式规则,有点像CSS的样式写法。一个@keyframes中的样式规则是由多个百分比构成的,如0%~100%,可以在这个规则中创建更多个百分比,分别给每个百分比中需要有动画效果的元素加上不同的属性,从而让元素达到一种不断变化的效果,比如说移动,再比如改变元素颜色、位置、大小和形状等。 不过有一点需要注意, 可以使用“ frome”“to”代表一个动画是从哪开始,到哪结束,也就是说from就相当于0%,而to相当于100%。值得说的是,0%不能像别的属性取值一样把百分比符号省略,在这里必须加上百分符号(%)。如果没有加上,这个@keyframes是无效的,不起任何作用。因为@keyframes的单位只接受百分比值。@keyframes可以指定任何顺序排列来决定animation动画变化的关键位置 CSS中为元素应用动画: 要在CSS中为元素应用动画, 首先要创建一个已命名的动画,然后将它附加到该元素属性声明块中的一个元素上。 动画本身并不执行任何操作; 为了向元素应用动画,需要将动画与元素关联起来。这个要创建的动画,必须使用@keyframes来声明(或者对于当前的Webkit实现,使用@-webkit-keyframes),后跟所选择的名称,该名称主要用于对动画的声明作用,然后指定关键帧。 :CSS3动画8个子属性详解
py3study
2020/01/08
1.2K0
css3动画变换transform用法
刚才说到transition动画执行,接下来看下动画变换(transform),transform属性的取值4个
十月梦想
2018/08/29
3850
CSS3的3D变换和动画
IE10,firefox以及Opera支持@keyframe,而chrome和safari需要加浅醉-webkit-,IE9及早期IE版本是不支持的,所以这些功能一般是在移动端使用.
IMWeb前端团队
2019/12/03
1.2K0
css3 3d变换和动画——回顾
1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现。   语法:transform-style: flat | preserve-3d       flat 表示所有子元素在2D平面呈现。       preserve-3d 表示所在元素在3D空间中呈现。 2.perspective  定义3D元素距视图的距离,以像素计,当为元素定义perspective 属性时,其子元素获得透视效果,而不是元素本身   语法:perspective: number | none;       nu
用户1197315
2018/01/22
6770
css3 3d变换和动画——回顾
【CSS3】CSS3 动画 ⑥ ( 动画属性示例 | 精灵图帧动画效果实现 )
实现逻辑是 设置 元素的 animation-timing-function 动画属性 , 使用 steps(n) 属性值指定动画步长 ;
韩曙亮
2023/10/15
5990
【CSS3】CSS3 动画 ⑥ ( 动画属性示例 | 精灵图帧动画效果实现 )
CSS3的3D变换和动画
本文主要介绍了CSS3的一些新特性,包括3D变换、动画、过渡、多背景、阴影、边框、@keyframes、calc、flex、box-align、box-flex等。同时,还介绍了一些浏览器兼容性问题以及如何解决这些问题的方法。
IMWeb前端团队
2017/12/29
1.6K0
CSS3 动画Animation的8大属性
animation复合属性。检索或设置对象所应用的动画特效。 如果有多个属性值时以”,”隔开,适用于所有元素,包含伪对象:after和:before
十月梦想
2018/08/29
3680
CSS3动画属性 animation详解(看完就会)
轮播图swiper框架的基本使用 【Transform3D】转换详解(看完就会) 【css动画】移动的小车
坚毅的小解同志的前端社区
2022/11/28
1K0
CSS3动画属性 animation详解(看完就会)
通过CSS设置文本属性
文本属性 color 设置文本颜色; div span{ color: red; } 浏览器显示 text-align 设置元素水平对齐方式; div{text-align: center;} 浏览器显示看上图 text-indent 设置首行文本的缩进; div{ text-align: left; text-indent:20px; } 缩进截图效果不明显,自己可以试一下,切记
全栈开发日记
2022/05/12
1K0
通过CSS设置文本属性
【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )
在 CSS3 中 , 可以设置 多个 动画节点 , 精确地 控制 一个动画 或 若干动画 , 实现 复杂 的 动效 ;
韩曙亮
2023/10/15
2620
【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )
【Android 属性动画】属性动画 Property Animation 简介 ( 属性动画简介 | 属性动画特性 )
文章目录 一、属性动画简介 二、属性动画特性 一、属性动画简介 ---- 属性动画简介 : 1.动画制作框架 : 属性动画系统 , 允许你 将任何可变的操作制作成动画 , 其功能很强大 ; 2.基本功能 : 使用该框架 , 可以 定义一个随时间改变的动画 ; 3.属性随时间改变 : 动画执行期间 , 修改任意对象的属性 , 其组件的变化生成一个动画 ; 4.不受可见性限制 : 即使 该组件不可见 , 或者绘制在屏幕外部 , 该动画也可以生效 ; 5.属性动画本质 : 属性动画在一个指定的时间段内 , 修改某
韩曙亮
2023/03/27
4.7K0
CSS3矩阵变换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #div1{ width:100px;height: 100px; background: red; transition: 1s; } #div1:hover{ /*-webkit-transform: matrix(0.5,0.38,-0.38,2,0,0);*/ } /*matrix(0.5,0.38,-0.38,2,0
前朝楚水
2018/04/02
7660
前端学习(18)~css3属性学习(十一):动画详解
transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。
Vincent-yuan
2020/03/19
2.2K0
【CSS3】CSS3 动画 ⑤ ( 动画速度曲线 | 设置动画步长 | 动画匀速执行 | 动画分 2 步执行 | 使用动画步长实现打字机效果 )
CSS3 样式中 , 设置 动画速度曲线 的属性是 animation-timing-function 属性 ;
韩曙亮
2023/10/15
6510
【CSS3】CSS3 动画 ⑤ ( 动画速度曲线 | 设置动画步长 | 动画匀速执行 | 动画分 2 步执行 | 使用动画步长实现打字机效果 )
C# 通过遍历设置控件属性
foreach (Control control in this.Controls) { if (control is Button)
zls365
2020/08/19
1.2K0
C# 通过遍历设置控件属性
自定义View(六)-动画- AnimatorSet与XML设置属性动画
AnimatorSet是组合动画,前面在ObjectAnimator.ofPropertyValuesHolder(),时也可以做到控制多个属性做动画,但是.ofPropertyValuesHolder(),仅仅是将多个属性同时做动画却无法灵活控制每个属性的播放顺序,针对的是一个控件,而AnimatorSet是组合动画。更侧重的是在多个动画播放时对动画的控制(可以控制动画的顺序,延时,同时可以控制多个控件的动画等等)。
g小志
2018/09/11
1.5K0
自定义View(六)-动画- AnimatorSet与XML设置属性动画
css3 动画
有人将HTML 5和CSS 3比做Flash的杀手,这是有原因的。因为除了HTML 5能够实现矢量图形制作外,使用CSS 3还可以对图像进行更细致的操作,它新增了动画功能,要实现图像的变形等功能,只需要一行CSS就可以实现了。那么结合HTML 5和JavaScript就可以将动画做得更美,效果完全可以接近Flash。但要想实现Flash的那种效果,还是需要下一定工夫的,但新增的动画功能 已经足够让人兴奋了。通过下面这个例子,读者可以试验一下利用简单的CSS 3特性完成鼠标悬停时的动画效果,见代码清单3-19。
py3study
2020/01/09
2.4K0
CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了。 索性在这里进行一个简单的对比,加深自己的记忆。 浏览器兼容性 CSS3 transform 属性 Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。 Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。 O
蓓蕾心晴
2018/04/12
1.1K0
css3动画
image.png 不用javascript也可以做互动动画。
前朝楚水
2018/04/02
1.3K0
css3动画

相似问题

CSS3变换动画

11

通过CSS3变换实现SVG元素的动画

11

CSS3动画重复变换效果

12

是否可以使用关键帧动画分别为多个css变换属性设置动画

14

使用变换的css3动画

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文