html的过渡属性,CSS3 transition 过渡属性
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。通过过渡transition属性,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果,要实现这一点,必须实现一项内容,即指定效果的持续时间。
一、过渡属性
属性
描述
CSS
简写属性,用于在一个属性中设置四个过渡属性。
3
规定应用过渡的 CSS 属性的名称(默认为all)。
3
定义过渡效果花费的时间。默认是 0s。
3
规定过渡效果的时间曲线。默认是 "ease"函数。
3
规定过渡效果何时开始。默认是 0s。
3
二、复合属性
过渡transition的这四个子属性只有是必需值且不能为0。其中,和都是时间。当两个时间同时出现时,第一个是,第二个是;当只有一个时间时,它是,而为默认值0
transition: || ||
||
[注意]transition的这四个子属性之间不能用逗号隔开,只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值,多值部分稍后介绍);而空格隔开的代表不同属性的四个关于过渡的子属性。
.test {
border: 1px solid red;
width: 100px;
height: 50px;
transition: 2s;/*代表持续时间为2s,延迟时间为默认值0 */
/* transition: 1s 2s; 代表持续时间为1s,延迟时间为2s */
}
.test:hover {
width: 300px;
}
image
三 、相关子属性。
transition-property
transition-property属性指定CSS属性的nametransition效果(transition效果时将会启动指定的CSS属性的变化)。none: 没有指定任何样式,all: 默认值,表示指定元素所有支持transition-property属性的样式。: 可过渡的样式,可用逗号分开写多个样式。
注意:始终指定 transition-duration属性,否则持续时间为0,transition不会有任何效果。
1.可过渡的样式
不是所有的CSS样式值都可以过渡,只有具有中间值的属性才具备过渡效果 ,具体如下
颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度:
[1]max-height min-height max-width min-width height width
[2]border-width margin padding outline-width outline-offset
[3]font-size line-height text-indent vertical-align
[4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
.test {
border: 1px solid red;
width: 100px;
height: 50px;
background-color: lightblue;
transition: width 2s, background-color 2s ease 0.5s;
/*代表width持续时间为2s,延迟时间为默认值0;
background-color持续时间2s 延迟0.5s */
}
.test:hover {
width: 300px;
background-color: indianred;
}
效果图:
image
transition-duration
transition-duration属性规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值:0s。
[注意]该属性不能为负值 。
[注意]若该属性为0s则为默认值,若为0则为无效值。所以必须带单位 。
[注意]该值为单值时,即所有过渡属性都对应同样时间;该值为多值时,过渡属性按照顺序对应持续时间 。
transition-timing-function
transition-timing-function属性指定切换效果的速度。它可以取一下几个值。默认值:ease 。
值
描述
linear
规定以相同速度开始至结束的过渡效果,即匀速。(等于 cubic-bezier(0,0,1,1))。
ease
规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in
规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out
规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out
规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)
在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay
transition-delay属性指定何时将开始切换效果,值是指以秒为单位(S)或毫秒(ms)。默认值:0s。
[注意]该属性若为负值,无延迟效果,但过渡元素的起始值将从0变成设定值(设定值=延迟时间+持续时间)。若该设定值小于等于0,则无过渡效果;若该设定值大于0,则过渡元素从该设定值开始完成剩余的过渡效果 [注意]若该属性为0s则为默认值,若为0则为无效值。所以必须带单位 。
[注意]该值为单值时,即所有过渡属性都对应同样时间;该值为多值时,过渡属性按照顺序对应持续时间 。
四、过渡阶段
过渡开始时间=样式改变的时刻+过渡延迟时间;而过渡结束时间=过渡开始时间+过渡持续时间。
过渡起始值=过渡前的过渡属性值;而过渡结束值=过渡完成后的过渡属性值 。
过渡分为两个阶段:前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段,则反向阶段的初始值是前进阶段结束时的瞬时值
以hover为例,若在元素非hover态时设置transition,相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition,则前进状态以hover态设置的为准,而反向状态以非hover态设置的为准 。
.test {
border: 1px solid red;
width: 100px;
height: 50px;
transition: 3s;/* 设置反向状态 */
}
.test:hover {
width: 300px;
transition: 100ms;
}
效果:
image
五、触发方式
一般地,过渡transition的触发有三种方式,分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等 。
【1】hover : 鼠标悬停触发 。
【2】active : 用户单击元素并按住鼠标时触发 。
【3】focus : 获得焦点时触发。
【4】@media触发 : 符合媒体查询条件时触发 。
/* 把浏览器的宽度拖动到小于1000px时触发 */
@media (max-width: 1000px){
.test{
width: 500px;
}
}
html的过渡属性,CSS3 transition 过渡属性相关推荐
- html中content属性,CSS3的content属性用法详解
Content属性应该算是使用最常用的一个css属性之一吧,比如我们创建一个聊天气泡.超链接的立体翻转特效.添加图标.都要使用到content属性,当然这个属性要结合:before和:after伪类使 ...
- html中content属性,CSS3的content属性详解
CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入. 插 ...
- css3 transition transform属性造成文字抖动
现象:信息栏第一行文字,最后总会抖动 代码: .match .match-item{width: 200px;height: 300px;display: inline-block;margin: 0 ...
- html中的transform属性,CSS3中transform属性
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 一.Transform描述: ransform是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转r ...
- 原 CSS3中的过渡,css3之过渡
CSS3的过渡和转换 CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用 ...
- CSS3 变形 过渡 动画
文章目录 CSS3 变形 过渡 动画 transform(变形) 概述 translate() 平移 scale() 缩放 skew() 倾斜 rotate() 旋转 transform-origin ...
- css transition过渡
css过渡效果 transition设置过渡,transition的属性包括如下图: 属性 描述 transition 简写属性,用于在一个属性中设置四个过渡属性. transition-proper ...
- html的过渡属性,CSS3属性transition(过渡)多属性详解
transform呈现的是一种变形结果,而transition呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显.渐弱.动画快慢等.transition和transform是两种不同的动画模型. ...
- CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 旋转.扭曲.缩放.位移.矩阵 ...
最新文章
- 理解 Lua 的那些坑爹特性
- 【GISER Painter】矢量切片(Vector tile)
- 虎年云原生落地技术趋势
- LeetCode之Count and Say
- C/C++冷门知识点你知道多少呢?
- 把今天接到的任务都给搞定了
- InstallShield 2008 终止声明 (EOL)对最终客户意味着什么
- LB服务:硬件如何被软件取代(上)
- 详解 TCP/IP 协议
- linux 编译c q64,Ubuntu 12.04 LTS 64位搭建Qt4终端编译环境
- halcon中编程运算符_R编程中的运算符
- vc++中进程通信之剪贴板常用函数
- Lucene 的 Scoring 评分机制
- 【[SDOi2012]Longge的问题】
- Arcscene教程
- 论文阅读: Anomaly Detection with Partially Observed Anomalies
- mysql改为sql_sql - 将MySQL列更改为AUTO_INCREMENT
- 20222817《Linux内核原理与分析》第五周作业
- html字体标签设计,36个重要的HTML标签
- 服务器内置usb能否修改为外置,台式机内置的DVD刻录机可以改成外置的USB接口吗?...