2023年6月21日发(作者：)

css3同时加载两个动画最近在做H5，遇到这样的需求（如题）先上⼀部分代码：.cur .p1d1d4{ width: 3rem; margin: 2rem 5.3rem 0 0; -webkit-animation: p1d1d4 1s ease-out; animation: p1d1d4 1s ease-out;}@keyframes p1d1d4 { 0% { margin: 2rem 10rem 0 0; } 100% { margin: 2rem 5.3rem 0 0; }}@-webkit-keyframes p1d1d4{ 0% { margin: 2rem 10rem 0 0; } 100% { margin: 2rem 5.3rem 0 0; }

正常情况下基本思路是：

监听webkitAnimationEnd动画结束以后再add另⼀个class1 elector('.p1d1d4').addEventListener("webkitAnimationEnd",function(e){2 ('p1d1d4Scale')3 })

这样的话两个 动画连接在⼀起（⾃⼰脑补效果），但是这样做有个问题是如果这个⽅案是单页⾯形式的，回到之前页⾯过后会发现这个页⾯始终保留在p1d1d4Scale的动画结束效果，如果想再次执⾏之前的效果的话，可能要把之前的class效果去掉然后再加上 但是我想在⼀个class中实现这个效果怎么实现呢pasting 在这⾥我想到了transition 简单介绍⼀下这个属性 这个⽅法有4个属性 transition-property 指定缓动的属性 transition-duration 缓动的执⾏时间 transition-timing-function 缓动类型 transition-delay 在指定时间之后执⾏（延期执⾏）

说道这⾥⼤家应该就懂了.cur .p1d1d4{ width: 3rem; margin: 2rem 5.3rem 0 0; -webkit-animation: p1d1d4 1s ease-out; animation: p1d1d4 1s ease-out; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); transition: all 1s ease-out 2s; -webkit-transition: all 1s ease-out 2s; -moz-transition: all 1s ease-out 2s; -o-transition: all 1s ease-out 2s; -ms-transition: all 1s ease-out 2s;} 动画结束之后2秒执⾏，分享到此结束

从今天起我打算随⼼⼀些写博客，可能会基本的分享思路和⽅案或者技巧，⾔外之意就是可能会很简短，我上次的随笔 react demo是真东西，可以直接上⼿项⽬，全局ES6写法 webpack打包加载 热加载 react-router 总之汇集了⼀个⼩的demo，欢迎关注

2023年6月21日发(作者：)

css3同时加载两个动画最近在做H5，遇到这样的需求（如题）先上⼀部分代码：.cur .p1d1d4{ width: 3rem; margin: 2rem 5.3rem 0 0; -webkit-animation: p1d1d4 1s ease-out; animation: p1d1d4 1s ease-out;}@keyframes p1d1d4 { 0% { margin: 2rem 10rem 0 0; } 100% { margin: 2rem 5.3rem 0 0; }}@-webkit-keyframes p1d1d4{ 0% { margin: 2rem 10rem 0 0; } 100% { margin: 2rem 5.3rem 0 0; }

正常情况下基本思路是：

监听webkitAnimationEnd动画结束以后再add另⼀个class1 elector('.p1d1d4').addEventListener("webkitAnimationEnd",function(e){2 ('p1d1d4Scale')3 })

这样的话两个 动画连接在⼀起（⾃⼰脑补效果），但是这样做有个问题是如果这个⽅案是单页⾯形式的，回到之前页⾯过后会发现这个页⾯始终保留在p1d1d4Scale的动画结束效果，如果想再次执⾏之前的效果的话，可能要把之前的class效果去掉然后再加上 但是我想在⼀个class中实现这个效果怎么实现呢pasting 在这⾥我想到了transition 简单介绍⼀下这个属性 这个⽅法有4个属性 transition-property 指定缓动的属性 transition-duration 缓动的执⾏时间 transition-timing-function 缓动类型 transition-delay 在指定时间之后执⾏（延期执⾏）

说道这⾥⼤家应该就懂了.cur .p1d1d4{ width: 3rem; margin: 2rem 5.3rem 0 0; -webkit-animation: p1d1d4 1s ease-out; animation: p1d1d4 1s ease-out; -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); transition: all 1s ease-out 2s; -webkit-transition: all 1s ease-out 2s; -moz-transition: all 1s ease-out 2s; -o-transition: all 1s ease-out 2s; -ms-transition: all 1s ease-out 2s;} 动画结束之后2秒执⾏，分享到此结束

从今天起我打算随⼼⼀些写博客，可能会基本的分享思路和⽅案或者技巧，⾔外之意就是可能会很简短，我上次的随笔 react demo是真东西，可以直接上⼿项⽬，全局ES6写法 webpack打包加载 热加载 react-router 总之汇集了⼀个⼩的demo，欢迎关注