CSS3新特性+less实验（3）——transition

最新推荐文章于 2024-05-18 09:54:07 发布

hjb2722404

最新推荐文章于 2024-05-18 09:54:07 发布

阅读量1.4k

点赞数

分类专栏： CSS理论与应用

本文链接：https://blog.csdn.net/hjb2722404/article/details/46348939

版权

CSS理论与应用专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本次实验，我们将就CSS3新特性transition做一些深入研究。

实验对象：transition

transition实际上是一种提供了一组用来实现效果过渡方法的复合属性。

语法

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

说明

transition-property:参与过渡的属性，可以是任意的CSS属性，也可以是none代表不设置，或者all代表所有可以进行过渡的属性，可以提供多个属性值，用逗号隔开；

有过渡效果的属性：

属性	可能值
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top	length, percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

transition-duration:过渡效果的持续时间，单位为s或ms

transition-trming-function:过渡的动画类型,可取值为：

取值	说明
linear	线性过渡
ease	平滑过渡
ease-in	由慢到快
ease-out	由快到慢
ease-in-out	由慢到快再到慢
step-start	等同于steps(1,start)
step-end	等同于 steps(1,end)

steps(,[start | end]):这是一个步进函数，接受两个参数，第一个必须为正整数，表示单位步进数，第二个值可以为start或end，指定每一步的值发生变化的时间点。

还有一个函数可作为值：

cubic-bezier(,,,) :特定的贝塞尔曲线类型，4个值需在[0,1]区间内。

贝塞尔曲线也用在作图领域（想想钢笔工具），

不了解贝塞尔曲线的，请移步这里：贝塞尔曲线-百度百科

transition-delay:过渡延迟时间，单位s或ms;

实例

HTML

……
  <title>CSS3新特性实验——transition</title>
    <link rel="stylesheet" href="style.css" type="text/css"/>

</head>
<body>

    <div class="content">
        <div class="box1"></div>
    </div>
</body>
</html>

LESS


.transition(@pro:background-color,@dur:3s,@fn:ease-in,@delay:.5s){
  -webkit-transition-property: @pro;
  -moz-transition-property: @pro;
  -o-transition-property: @pro;
  transition-property: @pro;

  -webkit-transition-duration: @dur;
  -moz-transition-duration: @dur;
  -o-transition-duration: @dur;
  transition-duration: @dur;

  -webkit-transition-timing-function: @fn;
  -moz-transition-timing-function: @fn;
  -o-transition-timing-function:@fn;
  transition-timing-function: @fn;

  -webkit-transition-delay: @delay;
  -moz-transition-delay: @delay;
  -o-transition-delay: @delay;
  transition-delay: @delay;
}

.content {
  width: 1400px;
  height: 600px;
  margin-left: 100px;
  margin-top: 100px;
  border: 1px solid #ccc;
}

.box {
  width:100px;
  height:100px;
  float: left;
  margin-right: 30px;
  background-color: #000;
}

.box1 {
  .box;
  .transition();
}

.box1:hover{
  background-color: #666;
}

css

.content {
  width: 1400px;
  height: 600px;
  margin-left: 100px;
  margin-top: 100px;
  border: 1px solid #ccc;
}
.box {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 30px;
  background-color: #000;
}
.box1 {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 30px;
  background-color: #000;
  -webkit-transition-property: background-color;
  -moz-transition-property: background-color;
  -o-transition-property: background-color;
  transition-property: background-color;
  -webkit-transition-duration: 3s;
  -moz-transition-duration: 3s;
  -o-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.box1:hover {
  background-color: #666;
}

效果：

这里写图片描述

这是默认状态

这里写图片描述

这是鼠标悬停在box1之上之后的效果

总结

总的来说，transition规定了过渡效果的各项参数，但它需要一定的触发条件，比如上面css中的.box1:hover，就是使用鼠标悬停来触发过渡，实际应用中，多采用与JS结合的方式，动态添加类名来实现各种过渡效果。

hjb2722404

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新特性+less实验（3）——transition

本次实验，我们将就CSS3新特性transition做一些深入研究。实验对象：transition transition实际上是一种提供了一组用来实现效果过渡方法的复合属性。语法transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transiti
复制链接

扫一扫