首页 > 其他分享 >CSS3过渡

CSS3过渡

时间:2022-09-21 10:56:35浏览次数:55  
标签:CSS3 效果 transition 过渡 duration 慢速 属性

简介

transition CSS 属性是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个简写属性。

transition:[transition-property  transition-duration  transition-timing-function   transition-delay ]
transition: 属性(All所有的) 持续时间 运动曲线 何时开始;

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换,像是 :hover,:active 或者通过 JavaScript 实现的状态变化。

例子:指定 margin-right 属性和 color 属性的过渡,持续时间分别为2s和1s

transition: margin-right 2s, color 1s;

1、transition-property

  • none 没有属性会获得过渡效果。
  • all 所有属性都将获得过渡效果。
  • property 应用过渡效果的 CSS 属性名称列表,列表以逗号分隔

2、transition-duration

duration:定义过渡效果花费的时间
允许取值:time值,它是以秒作单位,默认是0,意味着没有效果

3、transition-timing-function

timing-function:规定过渡效果的时间曲线

 

  • linear :以相同的速度开始至结束,也就是匀速
  • ease:慢速开始,然后中间变快,最后以慢速结束的过渡效果 慢快慢
  • ease-in:慢速开始,快要结束的时候速度会变快的过渡效果 慢快
  • ease-out:快速开始,快要结束的时候速度会变慢的过渡效果 快慢
  • ease-in-out:慢速开始,中间匀速,最后以慢速结束的过渡效果 慢匀慢

 

4、transition-delay

delay:规定效果开始之前需要等待的时间
允许的值:time值,以秒作单位,默认是0

 

标签:CSS3,效果,transition,过渡,duration,慢速,属性
From: https://www.cnblogs.com/qianduanLamp/p/16714487.html

相关文章

  • CSS3-千峰
    CSS3-千峰.child>li{}---只作用在儿子标签,孙子标签无影响.child+li{}---这个标签后的第一个li.child~li{}---这个标签后的所有li[class]{}div[class]{}div[class=b......
  • 【css3】选择器 :nth-of-type(n)和:nth-child(n) 的区别
          参考:https://blog.csdn.net/dangbai01_/article/details/88545350?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7E......
  • Android技术分享| Activity 过渡动画 — 让切换更加炫酷
    介绍在android5.0以上版本中,google为我们提供了几种activity切换的过渡动画,目的是为了让activity切换转场更加美观,而在android5.0之前的activity切换显得生硬......
  • 063_末晨曦Vue技术_过渡 & 动画之显性的过渡持续时间
    显性的过渡持续时间点击打开视频讲解更加详细在很多情况下,Vue可以自动得出过渡效果的完成时机。默认情况下,Vue会等待其在过渡效果的根元素的第一个transitionend或a......
  • 使用CSS3快速实现毛玻璃效果
    使用CSS3实现毛玻璃效果并没有想象中那么难,我们只需要了解一个属性:backdrop-filter:blur(5px);在使用该属性之前我们先要区分backdrop-filter与filter的区别。filter......
  • 职业过渡到技术
    职业过渡到技术Readaboutcareertransition似乎每个人都想过渡到科技行业。好吧,我也可以这样说。现在,问题是,我们当中有多少人会成功(我暗暗希望每个人都能成功,因为我知......
  • 第2周 CSS3基础语法与盒模型
    第一节CSS3基础入门1、CSS3简介 2、CSS3书写的位置 3、CSS3书写的语法 第二节CSS3选择器  第三节文本与字体属性 第四节盒模型......
  • CSS3兄弟选择器
    +选择器(相邻兄弟选择器)如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。格式:元素1+元素2结果:紧挨着元素1后面的元素2被选中......
  • css3 弹性盒子
    /*使用弹性盒子布局*/display:flex;/*设置子元素在父元素排列方向*/flex-direction:row;/*子元素沿主轴对齐方式*//*justify-content:space-around;*//*......
  • CSS3层叠样式表
    ​ /**作者:呆萌老师*☑csdn认证讲师*☑51cto高级讲师*☑腾讯课堂认证讲师*☑网易云课堂认证讲师*☑华为开发者学堂认证讲师*☑爱奇艺千人名师计划成员*在这里......