首页 > Web开发 > 详细

css3 动画效果 总结 不断完善~~

时间:2015-09-01 12:13:22      阅读:223      评论:0      收藏:0      [点我收藏+]

1.transition 动画过程改变某个css属性的效果 (比如宽高 颜色)

语法

transition:    all  所有元素                                +   执行时间 (如2S ) + 速度效果      +过渡效果开始时间

                   none 不执行transition动画效果

 

transition:   transition-property   transition-duration  transition-timing-function transition-delay

描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

 

实例 这里transition 做出的动画效果是基于某个元素的css属性 ,同时响应做出效果 要有事件发生 如hover 。下例中改变的是宽度 那hover就要把宽度改变 。

transition主要做的是 声明css的属性 后面跟着动画时间

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style type="text/css">
    #a1{
        transition:width 2s;
        -webkit-transiton:width 2s;
        width: 100px;
        height: 100px;
        background: #ccc;
        
    }
    #a1:hover{
        width: 300px;
    }
</style>
<div  id="a1">transiton改变宽度</div>
</body>
</html>

  

css3 动画效果 总结 不断完善~~

原文:http://www.cnblogs.com/xxx91hx/p/4775137.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!