JS 使用JS操作CSS动画

最新推荐文章于 2024-01-05 13:24:17 发布

weixin_30263073

最新推荐文章于 2024-01-05 13:24:17 发布

阅读量760

点赞数

原文链接：http://www.cnblogs.com/potato-lee/p/6120762.html

版权

<!-- webkfa.com -->
<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" />
	<meta name="apple-touch-fullscreen" content="YES" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="format-detection" content="telephone=no" />
	<title>js直接操作css3属性transition和webkitTransform实现动画</title>
  </head>
  
  <body>
  	<input type="button" value="往下" οnclick="xia(100);"/>
  	<input type="button" value="往上" οnclick="shang(0);"/>
    <div style="width:50px;height:50px;background:red;" id="webkfaid"></div>
    <script type="text/javascript">
    	function xia(sum){
    		var obj=document.getElementById("webkfaid");
    		obj.style.transition="-webkit-transform 500ms ease-out";
			obj.style.webkitTransform="translate(0px,"+sum+"px) scale(1) translateZ(0px)";
    	}
    	function shang(sum){
    		var obj=document.getElementById("webkfaid");
    		obj.style.transition="-webkit-transform 500ms ease-out";
			obj.style.webkitTransform="translate(0px,"+sum+"px) scale(1) translateZ(0px)";
    	}
    </script>
  </body>
</html>

　　摘自 http://www.webkfa.com/one4/w648.html

而使用CSS创建动画的时候，写法如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-duration属性</title>
    <style type="text/css">
        @-webkit-keyframes mytranslate
        {
            0%{}
            100%{-webkit-transform:translateX(100px);}
        }
        div:not(#container)
        {
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:red;
            -webkit-animation-name:mytranslate;
            -webkit-animation-timing-function:linear;
        }
        #container
        {
            display:inline-block;
            width:140px;
            border:1px solid silver;
        }
        #div1{-webkit-animation-duration:2s;margin-bottom:10px;}
        #div2{-webkit-animation-duration:4s;}
    </style>
</head>
<body>
    <div id="container">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
</body>
</html>

　　CSS动画的几个属性，若是不需要任何行为触发动画，将在元素的样式中调用动画名称。代码如下：

 #div1
        {
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:red;
            -webkit-animation-name:mytranslate;/*调用动画名称*/
            -webkit-animation-timing-function:linear;/*动画变换方式*/
            -webkit-animation-duration:2s;/*动画持续时间*/
            -webkit-animation-iteration-count:infinite;/*若是将infinite改为n,n为整数，就是循环几次。*/
          -webkit-animation-delay:.5s;/*动画延迟时间，表示动画延迟多少秒开始执行，默认为0*/
          -webkit-animation-direction:reverse;/*动画播放方向，属性取值有3个，normal	每次循环都向正方向播放（默认值）
            reverse每次循环都向反方向播放;alternate播放次数是奇数时，动画向原方向播放；播放次数是偶数时，动画向反方向播放*/

} @-webkit-keyframes mytranslate { 0%{} 100%{-webkit-transform:translateX(100px);} }

　CSS动画的总结

转载于:https://www.cnblogs.com/potato-lee/p/6120762.html

weixin_30263073

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫