前端笔记css3-（过渡属性transition）

最新推荐文章于 2024-04-22 03:16:22 发布

渴望看海的少年

最新推荐文章于 2024-04-22 03:16:22 发布

阅读量211

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签： css3 html5 css

本文链接：https://blog.csdn.net/DespairA/article/details/120044935

前端基础专栏收录该内容

23 篇文章

订阅专栏

过渡属性transition

transition:要过渡的属性花费时间单位秒运动曲线默认ease 何时开始；

后面两个可以省略；谁需要过渡就给谁添加过渡，而不是在hover和动画中,

可以写多个属性，写的同时可以用逗号分割，也可直接用all


      .box1 {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        /* transition: height 1s, width 1s; */
        transition: all 1s;
      }

实例

     .bar-in {
        width: 50%;
        height: 100%;
        border-radius: 3px;
        background-color: red;
        transition: all 0.5s;
      }
      .bar-in:hover {
        width: 100%;
      }