css3过渡动画——transition属性

最新推荐文章于 2023-06-07 01:25:26 发布

QQQqq031110

最新推荐文章于 2023-06-07 01:25:26 发布

阅读量109

点赞数

分类专栏： web 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/QQQqq031110/article/details/127501389

版权

本文介绍了CSS3的transition属性，包括transition-property、transition-duration、transition-timing-function和transition-delay。详细讲解了如何设置参与过渡的CSS属性、动画执行时间、速度曲线类型以及延迟时间，特别强调了transition-duration的重要性，指出没有设置duration将导致过渡效果不出现。

摘要由CSDN通过智能技术生成

语法

transition: transition-proterty transition-duration transition-timing-function transition-delay;
transition: css样式  动画的执行时间  速度类型  动画的延迟时间;
 多个css属性用逗号隔开
 transition: transform 2s, background-color 2s;

注意：谁发生了属性的改变 就加在谁身上

属性

1、transition-proterty
- css样式：参与过渡的css属性名称|all表示所有属性
2、transition-duration
- 动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms
3、transition-timing-function
- 速度类型
  
  1.linear 相同的速度从开始到结束，也就是匀速 2.ease 默认值慢速度开始--速度变快--慢速度结束 3.ease-in 慢速度开始的过渡效果，也就是以低速度开始 4.ease-out 慢速度结束的过渡效果，也就是以低速结束 5.ease-in-out 以慢速度开始和结束的过渡效果
4、transition-delay
- 延迟时间：默认0s,单位s|ms

注意：必须设置transition-duration属性，否则执行时间为0，不会产生过渡效果

<!DOCTYPE html>
<html lang="en

最低0.47元/天解锁文章

QQQqq031110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3过渡动画——transition属性

语法transition: transition-proterty transition-duration transition-timing-function transition-delay;transition: css样式动画的执行时间速度类型动画的延迟时间; 多个css属性用逗号隔开 transition: transform 2s, background-color 2s;注意：谁发生了属性的改变就加在谁身上属性1、transition-protertyc
复制链接

扫一扫