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属性是个复合属性,包括以下几个子属性:

1、property

设置过渡效果的css属性名称.

none 没有属性会获得过滤效果
all 所有属性都将获得过渡效果
多个属性用逗号隔开 值为指定的cssn属性应用过渡效果。

2、duration

规定完成过滤效果要多秒或毫秒,默认值为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>

3、timing-function

指定过滤函数,规定速度效果的速度曲线。

4、delay

指定开始出现的延迟时间

 

 




相关推荐

一、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>

前提是定义了background-image属性,然后用background-attachment

局部作用域 css的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他选择器重名,但是当我们

less作为css的一种形式的扩展,它并没有阉割CSS的功能,而是在现有的CSS语法 上,添加了很多额外的功能。 变量 在less中利用@符号进行变量的定义</p

css预处理器是一种语言用来为css增加一些编程的特性,无需考虑浏览器的兼容性问题,最为普遍的三款

module.exports = { "plugins": { "postcss-import": {},

Less是一个CSS的超集,Less允许我们定义变量,使用嵌套式声明,定义函数等。严格说Less包含两部分:(1)Less的语法 (2)Less预处理器。浏览器终究只认识CSS,所以Less文件