css3 transition用法(很详细)

css3 transition用法(很详细)解释transition(CSS属性)是transition-property,transition-duration,transition-timing-function和transition-delay的一个简写属性。transition可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。以下是属性解释。值描述transition-property指定CSS属性的name,transition效果transition-durationtransit

大家好,又见面了,我是你们的朋友全栈君。

解释

transition( CSS 属性)是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个简写属性。
transition可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。
以下是属性解释。

描述
transition-property 指定CSS属性的name,transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

以下列出了transition常用的几种。

1. transition: property name | duration

举例: transition: width .8s;
表示width属性变化时 过渡时间为0.8s

2. transition: property name | duration | delay

举例:transition: width .8s .5s;
表示width属性变化时 过渡时间为0.8s 且延迟0.5s之后执行宽度变化

3. transition: property name | duration | timing function

举例:transition: width .8s ease-in-out;
使用了转速曲线,以慢速开始和结束的过渡效果。
time function可能的值有以下。

描述
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值

4. transition: property name | duration | timing function | delay

举例: transition: width .8s ease 1s;
表示宽度变化时,过渡时间为0.8s, ease表示规定慢速开始,然后变快,然后慢速结束的过渡效果,延迟1s执行宽度变化

5. 多个属性用逗号隔开

transition: height .8s, color .8s;

6. 应用于所有属性

transition: all 0.5s ease-out;

7. 其他

/* Global values */
transition: inherit;
transition: initial;
transition: unset;
参考地址:MDN菜鸟教程

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159180.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 一文搞定子网划分!子网掩码!超详细例题解析![通俗易懂]

    一文搞定子网划分!子网掩码!超详细例题解析![通俗易懂]子网划分理论基础为什么进行子网划分减少网络流量,无论什么样的流量,我们都希望它少些,网络流量亦如此。如果没有可信赖的路由器,网络流量可能导致整个网络停顿,但有了路由器后,大部分流量都将呆在本地网络内,只有前往其他网络的分组将穿越路由器。路由器增加广播域,广播域越多,每个广播轻松划分子网域就越小,而每个网段的网络流量也越少。优化网络性能,这是减少网络流量的结果。简化管理,与庞大的网络相比,在一系列相连的小网络中找出并隔离网络问题更容易。有助于覆盖大型地理区域,WAN链路比LAN链路的速度慢得多,且

  • 怎样创建FTP服务器

    怎样创建FTP服务器1W次浏览2016.07.21更新用IIS建立FTP服务器不是非常复杂,操作起来比较简单,类似于用IIS建立网站,其中涉及的虚拟目录等概念和网站中的虚拟目录一致。用IIS建立FTP服务器不是非常

  • 狂神说Linux_狂神说博客园

    狂神说Linux_狂神说博客园Linux在服务器端,很多大型项目都是部署在Linux服务器上利用VM + Centos7搭建本地Linux系统你可以使用 man [命令]来查看各个命令的使用文档,如 :man cp。概念云服务器就是一个远程电脑Linux中一切皆文件根目录/,所有的文件都挂载在这个节点下/bin:bin是Binary的缩写, 这个目录存放着最经常使用的命令。/boot: 这里存放的是启动Linux时使用的一些核心文件,包括一些连接文件以及镜像文件。/dev : dev是Device(设备

  • linux shell 循环处理文件夹每个文件

    linux shell 循环处理文件夹每个文件在linux下,如果有一个文件夹,下面有好几个文件。每个文件如abc.csv这种格式。我想一个个处理文件,并且取得前缀abc,生成新文件abc.text.代码如下。注意我这里采用的是把*.cnf处理成*.csvfeatureSAT12是我需要调用的程序,在DIMACS上一个文件夹。#!/bin/bashPATH=”DIMACS”//最好使用绝对路径cd$PATHfor

  • FastClick遇到的坑及解决办法

    FastClick遇到的坑及解决办法最近产品妹子提出了一个体验issue——用iOS在手Q阅读书友交流区发表书评时,光标点击总是不好定位到正确的位置:如上图,具体表现是较快点击时,光标总会跳到textarea内容的尾部。只有当点击停留时间较久一点(比如超过150ms)才能把光标正常定位到正确的位置。一开始我以为是iOS原生的交互问题没太在意,但后来发现访问某些页面又是没有这种奇怪体验的。然后怀疑是否…

  • tabBar选项卡的背景色如何修改(自定义tabBar)&&推送nav到指定(根)视图控制器

    tabBar选项卡的背景色如何修改(自定义tabBar)&&推送nav到指定(根)视图控制器

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号