您的位置：首页 > 其它

transition学习笔记~~

2015-12-07 19:59 260 查看

一.属性详解

transition:允许css属性值在一定的时间区内平滑过渡：

transition-property:规定应用过渡的css属性名称，默认为all；多个属性用“,”隔开

transition-duration:过渡时间，默认为0；

transition-timing-function: 时间曲线，默认为ease；

transition-delay:过渡效果何时开始。

2.简写

例如：a{all 0.5s ease-in 1s;}

3.timing-function:

ease 逐渐变慢

linear 匀速

ease-in 加速

ease-out 减速

ease-in-out 先加速再减速

cubic-bezier 自定义

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
div {
width: 200px;
height: 200px;
overflow: hidden;
text-align: center;
border: 5px solid black;
}
div img{
width: 100%;
height: 100%;
vertical-align: middle;
-webkit-transition: all 0.8s linear;
-moz-transition: all 0.8s linear;
-ms-transition: all 0.8s linear;
-o-transition: all 0.8s linear;
transition: all 0.8s linear;
}
div img:hover{
width: 250px;
height: 250px;

}
</style>
</head>
<body>

<div>
<img src="images/img_19.png" alt="">
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航