过渡效果

过渡指的是元素的CSS属性值发生变化时的一种平滑过渡效果

语法:

1.属性:transition

  取值:property duration timing-fuction delay
  注意:1.属性简写是,四个属性值中,duration是必填项,其他三个属性值可以省略
     2.transition属性如果在伪类选择器中设置,元素的过渡效果只发生在第一次属性值变化的过程中,在有的属性值变化都不会添加过渡效果,为了保证页面效果,过渡属性在元素的默认样式中添加

2.过渡详解
  1.属性:transition-property
   取值: CSS属性名称
   作用:指定某一个CSS样式在发生值变化时添加过渡效果
   注意:1.多个属性时,使用,号隔开
      2.可以省略,所有涉及值改变的属性都会被自动添加过渡效果
      3.all 指定所有CSS属性在值变化时产生的属性都会被自动添加自动过渡中
  2.属性:transition-duration
   取值:以s为单位的数值
   作用:指定过渡时长
  3.属性:transition-timing-function
   作用:指定过渡效果的速度变化曲线
   取值: 1. ease :默认值,慢速开始,中间速度变快,慢速结束
      2. linear:匀速变化
      3. ease-in:慢速开始,匀速结束
      4.ease-out:快速开始,慢速结束
      5. ease-in-out:慢速开始和结束,中间先加速
  4.属性:transition-delay
   作用 :延迟几秒之后再发生过渡效果
   取值 :s / ms为单位的数值

原文地址:https://www.cnblogs.com/zengsf/p/9797048.html