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

Web 开发之H5 Transition动画变换

2017-07-02 00:00 246 查看

transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

注意： transition-duration 属性必须设置，否则默认为0s表示不执行

**语法：**transition: property duration timing-function delay;

第一种方式：

transition-property: background-color,width,height,transform;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay:0.5s;

第二种方式：
transition:background-color 2s linear 0.5s,width 1s linear 0.3s, height 1s linear 0.3s,transform 1s linear 0.3s ;

示例源代码

<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Transition示例</title>
<style>
div{
margin: 50px auto;
width: 200px;
height: 200px;
background-color: aqua;
text-align: center;
}
.div1{

/*transition-property: background-color,width,height,transform;*/
/*transition-duration: 2s;*/
/*transition-timing-function: linear;*/
/*transition-delay:0.5s;*/
transition:background-color 2s linear 0.5s,width 1s linear 0.3s, height 1s linear 0.3s,transform 1s linear 0.3s ;

}
.div1:hover{
background-color: fuchsia;
width: 500px;
height:500px;
transform: rotate(63000deg);
}
</style>
</head>
<body>
<div class="div1">示例</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航