transition过渡属性
博客专区 > lotozhou 的博客 > 博客详情
transition过渡属性
lotozhou 发表于2年前
transition过渡属性
  • 发表于 2年前
  • 阅读 48
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

一个动作的完成如果没有过度阶段就会显得很生硬,也很不美观,那么今天我们介绍的这个属性就是过度属性transition,这个标签的作用就是让动作有个过渡的过程。

1. transition过渡属性:

过渡元素是元素从一种形态逐渐改变为另一种效果

(1) 规定希望吧效果添加到哪个css3属性上

(2) 规定效果的时长

2. transition其他转换属性

transition-property 规定应用过渡效果的css属性名称

transition-property:none | all | property;

none:没有属性获得过渡效果

all:所有属性获得过渡效果

property:定义应用过渡效果的的css属性名称列表,列表以逗号分隔


transition-duration 定义过渡效果花费的时间,默认值为0


transition-timing-function 规定过渡效果的时间曲线,默认值“ease”

linear:规定以相同速度开始至结束的过渡效果

ease-in:规定以慢速开始的过渡效果

ease-out:规定以慢速结束的过渡效果

ease-in-out:规定以慢速开始和慢速结束的过渡效果

cubic-bezier(n,n,n,n):自定义过渡效果的值

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 8
博文 51
码字总数 51524
×
lotozhou
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: