css transition分别指定多个属性

2020-01-17 08:37:26

transition是CSS3新增的动画属性，可以实现属性的平滑过渡，大大提高用户体验，对于多个属性进行过渡的话很多人会这样写

1
.tr{ transition:all 1s}

很不幸的是如果我只需要对其中一两个而不是全部属性进行过渡话很多人就素手无策了，其实你可以这样写

1
.tr{ transition-property: width , height; transition-duration:1s , 1s;}

tips：

transition有四个属性，很多人都会遗忘，分别是transition-property，transition-duration，transition-timing-function，transition-delay，尤其是transition-delay，这个可以实现延迟动画

附上transition官方网址：https://www.w3.org/TR/css3-transitions/


  • 精彩推荐

  • 2019-10-09 14:39:40

    import双反斜杠\\的意思

    ​ \表示引用根目录下面的PHPEXcel;不用\的话是引用当前目录下面的 PHPExcel

  • 2019-10-09 15:33:31

    nuxt,nuxtjs简单介绍以及使用

    在集成的服务器端框架之间进行选择: 选择您喜欢的 UI 框架: 选择您喜欢的测试框架: 选择你想要的 Nuxt 模式 (Universal or SPA) 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。 添加 EsLint 以在保存时代码规范和错误检查您的代码。 添加 Prettier 以在保存时格式化/美化您的代码。

  • 2019-10-10 00:21:35

    laravel 5.6以上日志理解及日志格式定义

    Laravel/Lumen的日志默认是基于Monolog进行了一层封装，如果要求不高，用起来还是十分容易的，本文基于laravel5.6/Lumen5.6版本进行解说。5.6版对日志系统做了升级，将日志的配置单独放以了config/logging.php 配置文件中，所以现在实用多了。

  • 2019-10-10 10:10:49

    @Scheduled注解各参数详解

    每隔5秒执行一次：*/5 * * * * ? 每隔1分钟执行一次：0 */1 * * * ? 每天23点执行一次：0 0 23 * * ? 每天凌晨1点执行一次：0 0 1 * * ? 每月1号凌晨1点执行一次：0 0 1 1 * ? 每月最后一天23点执行一次：0 0 23 L * ? 每周星期天凌晨1点实行一次：0 0 1 ? * L 在26分、29分、33分执行一次：0 26,29,33 * * * ? 每天的0点、13点、18点、21点都执行一次：0 0 0,13,18,21 * * ?

  • 2019-10-10 11:07:47

    Java8 - Map更优雅的迭代方式：forEach

    用于两个参数之间进行操作的函数式接口是 BiConsumer。这个函数式接口正好用来操作 Map 的 key 和 value。JDK8强化了针对 Map 类的迭代方式，新增了一个默认方法 forEach，它接收一个 BiConsumer 函数。JDK给出的描述如下：

  • 2019-10-11 13:48:00

    关于Integer比较相等的问题

    原来两个Integer类型的数字不能用==来判断，要用equal 不过Integer类型的可以与1，2这样的纯数字来判断