通过javascript操作CSS3属性实现动画

作者佚名技术来源 CSS编程浏览发布时间 2012-05-26

　　CSS3提供两种方式来实现动画，transition与animation。animation涉及自定义一种为“@keyframes”的东西，这个需要动用到insertRule太复杂了，因此本文跳过它。有人它为transform也算一种，但它是静态的，需要结合transition才能变成动态，因此也跳过。

　　transition主要就是以下四个属性,后面跟着的是它们的初始值

　　transition-property: all;

　　transition-duration: 0s;

　　transition-timing-function: ease;

　　transition-delay: 0s;

　　transition-property的值可以为none,all,或指定上的属性名

　　当前可进行补间的CSS属性(比MDC上的少,去掉许多私有属性与比较罕见的属性)

　　transition-duration,动画的持续时间,其值为一个带单位的数值,单位可以为s与ms

　　transition-delay:动画延迟多久开始.

　　ease

　　This keyword sets the easing function to cubic-bezier(0.25, 0.1, 0.25, 1.0).

　　linear

　　This keyword sets the easing function to cubic-bezier(0.0, 0.0, 1.0, 1.0).

　　ease-in

　　This keyword sets the easing function to cubic-bezier(0.42, 0.0, 1.0, 1.0).

　　ease-out

　　This keyword sets the easing function to cubic-bezier(0.0, 0.0, 0.58, 1.0).

　　ease-in-out

　　This keyword sets the easing function to cubic-bezier(0.42, 0.0, 0.58, 1.0).

　　cubic-bezier

　　Specifies a cubic bezier curve to use as the easing function. The four number values specify the P1 and P2 points of the curve as (x1, y1, x2, y2). All values must be in the range [0.0, 1.0] inclusive.

　　但在JS操作它们时我们其中只需要transition就行了，由于这是浏览器商首先搞出来，因此都带着它们的前缀，如-ms-,-moz-等等，我们需要把它们改成驼峰风格才能调用，见下面的例子。

　　示例1,通过JS来操作这些CSS3属性实现动画效果:

  
<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>dom Framework</title> 
  <script> 
      var dom = function(s){ 
        return document.getElementById(s) 
      } 
      dom.cssName = function (name){ 
        var prefixes = ['''', ''-ms-'',''-moz-'', ''-webkit-'', ''-khtml-'', ''-o-''], 
        rcap = /-([a-z])/g,capfn = function($0,$1){ 
          return $1.toUpperCase(); 
        }; 
        dom.cssName = function(name, target, test){ 
          target = target || document.documentElement.style; 
  &nb

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 3 4 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: 如何有效编写软件的75条建议下一篇: 敲击最多的键和编程语言语法

关于通过javascript操作CSS3属性实现动画的所有评论

随机推荐