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

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;
         100px;
        height: 100px;
        background: #ccc;
        
    }
    #a1:hover{
         300px;
    }
</style>
<div  id="a1">transiton改变宽度</div>
</body>
</html>

2.transform 　　

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

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