css3 transition属性(动画过渡)
阅读数:48 评论数:0
跳转到新版页面分类
html/css/js
正文
一、概述
通常当css属性值更改后,浏览器会立即更新相应的样式,在css3中加入了transition属性,通过其可以将元素从一种样式在指定的时间内平滑的过滤到另一种样式,类似于简单的动画。
二、语法
transition-property
transition-duration
transition-timing-function
transition-delay
// transition是综合属性,可以同时设置上面四个
transition: property duration timing-function delay
//例如
transition: all 0 ease 0
transition属性中,transition-property和transition-duration为必填参数,也可以设置多组过渡效果,每组之间使用逗号进行分隔。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border: 3px solid black;
margin: 10px 0px 0px 10px;
transition: width .25s linear 1.9s, background 1s 2s, transform 2s;
}
div:hover {
width: 200px;
background-color: blue;
transform: rotate(180deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transition属性是个复合属性,包括以下几个子属性:
设置过渡效果的css属性名称.
none | 没有属性会获得过滤效果 |
all | 所有属性都将获得过渡效果 |
多个属性用逗号隔开 | 值为指定的cssn属性应用过渡效果。 |
规定完成过滤效果要多秒或毫秒,默认值为0,即不会有效果。
如果有多个参与过渡的属性,也可以依次为这些属性设置过渡需要的时间。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border: 3px solid black;
margin: 10px 0px 0px 10px;
transition-property: width, background;
transition-duration: .25s, 1s;
}
div:hover {
width: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
指定过滤函数,规定速度效果的速度曲线。
指定开始出现的延迟时间
相关推荐
一、ReactCSSTransitionGroup
React 官方提供了两个插件用于处理动画效果:一个是偏底层的 react-addons-transition-group,
css中写动画时,经常会用到这几个属性。
一、transform 变形效果
transform属性是静态属性,需要配合transition和animation才能展现出动画效果。
正常变换矩阵是$\l
一、概述
overflow属性用于当一个元素太大而无法适应父级窗口的大小时行为。具体又可以分为:
overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。
over
一、概述
background是css简写属性,可有一个或多个值,且可以按任意顺序放置:
background:
<bg-color>
<bg-image>
<position/bg-size>
Less是一个CSS的超集,Less允许我们定义变量,使用嵌套式声明,定义函数等。严格说Less包含两部分:(1)Less的语法 (2)Less预处理器。浏览器终究只认识CSS,所以Less文件