CSS 过渡模块

最新推荐文章于 2022-07-27 19:14:00 发布

落花雨时

最新推荐文章于 2022-07-27 19:14:00 发布

阅读量224

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端

本文链接：https://blog.youkuaiyun.com/mengxianglong123/article/details/84260022

大前端专栏收录该内容

88 篇文章

订阅专栏

本文深入讲解CSS过渡动画的实现原理，包括属性变化、过渡效果指定、持续时间设置、速度曲线和延迟时间等关键概念。通过实例说明如何为宽度和背景颜色属性应用过渡效果，以及如何简化过渡属性的书写。

 /*告诉系统哪个属性需要执行过渡效果*/
            transition-property: width, background-color;
            /*告诉系统过渡效果持续的时长*/
            transition-duration: 5s, 5s;



/*:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/
        div:hover{
            width: 300px;
            background-color: blue;
        }



/*1,过渡三要素
1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长

2.注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;*/



/*告诉系统过渡动画的运动的速度*/
            transition-timing-function: linear;
             transition-timing-function: ease;
            ransition-timing-function: ease-in;等


/*告诉系统延迟多少秒之后才开始过渡动画*/
            transition-delay: 2s;



/*如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为*/
transition:all 0s;