您的位置：首页 > Web前端 > CSS

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

2015-09-01 10:52 627 查看

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>

2.transform 　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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