CSS3 Transition[通俗易懂]

CSS3 Transition[通俗易懂]Transition简介Transition可以设置CSS属性的过渡效果,它有以下几个属性。transition-property用于指定应用过渡属性的名称transition-duration用于指定这个过渡的持续时间transition-delay用于指定延迟过渡的时间transition-timing-function用于指定过渡的类型transition-p…

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

Transition 简介

Transition 可以设置 CSS 属性的过渡效果,它有以下几个属性。

  • transition-property 用于指定应用过渡属性的名称
  • transition-duration 用于指定这个过渡的持续时间
  • transition-delay 用于指定延迟过渡的时间
  • transition-timing-function 用于指定过渡的类型

transition-property

transition-property 用于指定应用过渡的属性名称,可以指定多个属性名称,多个属性名称之间用, 分隔。
默认值为 all 也就是所有的元素都应用过渡效果。
例如,想让容器的宽高有一个过渡的效果,就可以这样写:

<style> .box { 
     width: 200px; height: 200px; background-color: dodgerblue; transition-property: width, height; /*设置宽高过渡的属性*/ } .box:hover { 
     /*在鼠标移入的时候修改宽高*/ width: 400px; height: 400px; } </style>

<body>
    <div class="box"></div>
</body>

注意:当只设置了 transition-property 属性而没有设置过渡持续时间的时候,过渡效果不会生效。

transition-duration

transition-duration 用于设置过渡的持续时间,属性值以秒s或毫秒ms为单位,默认值为0
同样可以指定多个时长,多个每个时长会被应用到由 transition-property 指定的对应属性上。
例如:想让容器的宽度有一个5秒的过渡效果,高度有一个3秒的过渡效果,就可以这样写:

<style> .box { 
     width: 200px; height: 200px; background-color: dodgerblue; transition-property: width, height; transition-duration: 5s, 3s; /*设置与 transition-property 对应的过渡时间*/ } .box:hover { 
     /*在鼠标移入的时候修改宽高*/ width: 400px; height: 400px; } </style>
</head>

<body>
    <div class="box"></div>
</body>

运行效果图:
运行结果图
如果指定的时长个数小于属性个数,那么时长列表会重复。
以下代码的意思是:宽度、高度、背景颜色的过渡时间都是5秒。

<style> .box { 
     width: 200px; height: 200px; background-color: dodgerblue; transition-property: width, height, background-color; /* 属性列表长一些 */ transition-duration: 5s; /* 如果时长的个数小于属性列表,则时长列表会重复 */ } .box:hover { 
     width: 400px; height: 400px; background-color: deeppink; } </style>

<body>
    <div class="box"></div>
</body>

运行结果如下:
在这里插入图片描述
如果时长列表更长,那么该列表会被裁减。
两种情况下,属性列表都保持不变。
以下代码的意思是:宽度的过渡时间是5秒,高度3秒,背景颜色2秒

<style> .box { 
     width: 200px; height: 200px; background-color: dodgerblue; transition-property: width, height, background-color; /* 设置三个属性的过渡效果 */ transition-duration: 5s, 3s, 2s, 1s, 0s; /* 有五个时长,会从第四个开始截断。 */ } .box:hover { 
     width: 400px; height: 400px; background-color: deeppink; } </style>

<body>
    <div class="box"></div>
</body>

运行结果如下
运行结果

transition-delay

transition-delay 规定了在过渡效果开始作用之前需要等待的时间(延迟时间),值以秒(s)或毫秒(ms)为单位,表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果;取值为负时会导致过渡立即开始。
可以指定多个延迟时间,每个延迟将会分别作用于你所指定的相符合的css属性transition-property

<style> .box { 
     width: 200px; height: 200px; background-color: dodgerblue; transition-property: width; /* 设置宽度有过渡效果 */ transition-duration: 3s; /* 设置过渡时间为 3s */ transition-delay: 1s; /* 设置延迟时间为 1s */ } .box:hover { 
     width: 300px; } </style>

<body>
    <div class="box"></div>
</body>

运行结果如下:
在这里插入图片描述

transition-timing-function

transition-timing-function用于指定过渡类型,可选值有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

  • ease 默认值,先加速后减速
<style> .box { 
     width: 200px; height: 200px; background-color: dodgerblue; transition-property: width; transition-duration: 3s; transition-timing-function: ease; /* 设置过渡类型,默认为 ease(先加速后减速) */ } .box:hover { 
     width: 400px; } </style>

<body>
    <div class="box"></div>
</body>

运行结果如下:
在这里插入图片描述

  • linear 匀速
transition-timing-function: linear;

运行结果如下:
在这里插入图片描述

  • ease-in 加速
transition-timing-function: ease-in;

运行结果如下:
在这里插入图片描述

  • ease-out 减速
transition-timing-function: ease-out;

运行结果如下:
在这里插入图片描述

  • ease-in-out 先加速后减速,效果比 ease 感觉强烈一些
transition-timing-function: ease-in-out;

运行结果如下:
在这里插入图片描述

transition-timing-function: cubic-bezier(.09, .88, .2, .17);

运行结果如下:
在这里插入图片描述

简写属性 transition:

transition是一个简写属性,用于设置 transition-property,transition-duration,transition-timing-function, 和transition-delay
CSS 过渡 由简写属性 transition 定义是最好的方式,可以避免属性值列表长度不一,节省调试时间 。

<style> .box { 
     width: 200px; height: 200px; background-color: dodgerblue; /* transition 简写属性 */ transition: 1s width, 2s height; } .box:hover { 
     width: 400px; height: 400px; } </style>

<body>
    <div class="box"></div>
</body>

运行结果如下:
在这里插入图片描述
注意:
transition属性中,各个值的书写顺序是很重要的:第一个可以解析为时间的值会被赋值给transition-duration,第二个可以解析为时间的值会被赋值给transition-delay

推荐抒写顺序
过渡时间 过渡样式 过渡形式 延迟时间 [,过渡时间 过渡样式 过渡形式 延迟时间]

兼容性
transition可以不用厂商前缀,不过鉴于标准刚刚稳定,对于基于 Webkit的浏览器仍然需要厂商前缀。如果想兼容旧版本的浏览器那么也需要厂商前缀(例如Firefox 15 及之前版本, Opera 12 及之前版本)

过渡的坑

  1. transition 在元素首次渲染还没有完成的情况下,是不会触发过渡的。
    过渡如果写在js 中,则必须 写在 onload 函数中,否则在页面中的元素还没有渲染完的情况下不会触发过渡!
<style> * { 
     margin: 0; padding: 0; } .box { 
     width: 200px; height: 200px; background-color: deepskyblue; margin: 100px auto; transition: 1s; } </style>
<script> /* 在元素还没有完全加载的时候是不会触发过渡的 */ var box = document.querySelector(".box"); box.style.width = "300px"; </script>
</head>

<body>
    <div class="box"></div>
</body>

解决方法

<script> window.onload = function () { 
     var box = document.querySelector(".box"); box.style.width = "300px"; }; </script>
  1. transition 在绝大部分变换样式切换时,变换组合的个数或位置不一样时,是没有办法触发过渡的
  2. 过渡只关心元素的初始状态和结束状态,没有方法可以获取到元素在过渡中每一帧的状态
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

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

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

(0)


相关推荐

  • 论文写作——origin画图[通俗易懂]

    论文写作——origin画图[通俗易懂]一origin的安装详见下面网址,内涵下载路径和破解方法。http://www.ddooo.com/softdown/51005.htm二origin画图1、柱状图①打开后页面如下所示。A(X)代表X轴的数据,B(Y)代表Y轴的数据。②将数据填入中间的book1中。book的作用和Excel中很类似,我们可以按照自己的需要添加sheet,添加book。我们将…

  • SpringMVC日期时间格式化方式

    SpringMVC日期时间格式化方式###引入平时,在写前端页面时,很有可能会涉及到表单中有日期的情况,一般情况下不同的业务使用的日期格式都有所不同。下面看下一个简单的例子说明SpringMVC对日期的处理。jsp页面如下(简单的表单,其中有一个输入框中输入的是日期时间):<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncodin

  • OpenProcessToken学习

    OpenProcessToken学习  要对一个任意进程(包括系统安全进程和服务进程)进行指定了写相关的访问权的OpenProcess操作,只要当前进程具有SeDeDebug权限就可以了。要是一个用户是Administrator或是被给予了相应的权限,就可以具有该权限。可是,就算我们用Administrator帐号对一个系统安全进程执行OpenProcess(PROCESS_ALL_ACCESS,FALSE,dwProcessID…

  • 《计算机网络》谢希仁第七版课后答案完整版[通俗易懂]

    《计算机网络》谢希仁第七版课后答案完整版

  • 安卓抓包神器_安卓抓包工具哪个好

    安卓抓包神器_安卓抓包工具哪个好好用的Android抓包神器VNET

    2022年10月29日
  • SSRF漏洞讲解

    SSRF漏洞讲解SSRF漏洞讲解一、初识SSRF漏洞1.定义2.产生原理3.会导致的危害4.常见产生SSRF的地方5.常见缺失函数二、SSRF漏洞利用1.函数(1)file_get_contents(2)fsockopen()(3)curl_exec()2.协议(1)file协议(2)http协议(3)dict协议(4)gopher协议三、绕过1.绕过方式(1)检查IP是否为内网IP(2)Host获取与DNS绕过(3)通过各种协议(4)利用URL解析器滥用问题四、修复修复方案五、小结一、初识SSRF漏洞1.定义

发表回复

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

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