上一章是说如何使用transition这种过度动画，这一章是说如何使用keyframe这种动画。
我是动画
keyframes定义动画，然后在show=true的时候正向执行，在show=false的时候反转运行一次。
我是具体呈现效果
如果我想自定义名称呢？比如下面这样：
效果是一样的
这样就可以配合
Animate.css库来使用，官网在这我是Animate.css官网官网提供了很多动画，不用我们自己写，怎么用呢？
1.将
Animate.css下载下来（这一步可以不用操作，通过cdn引用）。2.通过
<link>在<head>部分 引入3.在入场动画和出场动画先写
animated，然后再写上想要的动画效果名。如下图：
引入图
效果图如下：
我是效果图
同时使用过渡和动画和初始渲染
当我们刷新页面，第一次显示的时候，动画效果并没有。只有点击按钮的时候，才会出现动画效果，如果想让第一次显示的时候就有动画效果，应该怎么做呢？
这样做
在
transition上添加一个appear，同时也要添加appear-active-class，appear-active-class里的动画名字，随意添加。（这个叫做初始渲染的动画），appea-active-class里也可以写的是过渡效果。
如果这样写
如果如上图缩写，那就是
keyframe动画和过渡动画同时使用。但是两者时间好像不太匹配，过渡动画上写的是3s，在Animate里的动画时间是1s。
Animate里的动画持续时间为1s
两者不一样啊，整个动画效果怎么算呢？到底是1s还是3s，这个时候我们可以手动去设置时间。在transition里加上type，
像这样
type="transition"，意思就是我这里的动画啊，既有keyframe动画，也有transition的动画，我的动画时长以transition的为主。（type的值为animation或 transition）
自己定义时间
自己定义时间
这里表示整个动画持续时间为
10s，10000毫秒就是10s，还能自定义入场和出场的动画持续时间：
入场时间5s，出场时间10s
网友评论