CSS动画学习笔记：第一天

      因为觉得用户体验现在变的越来越重要了，而怎么提高用户体验？CSS动画和JS动画来做一些过渡或者其他的交互是一种很好的方式，所以我开始学习写css动画。这也是我的第一篇博客，还望各位看官多多包涵，有什么问你请在评论指正，谢谢！！！

      鉴于我在日常开发中都是使用vue，所以我这里使用了vue的transition组件进行开发。

      好了进入正题，因为之前从来没有写过css动画，在工作中最多使用了一点transform就是了，所以这次笔记做了一个div的显示隐藏。

h5代码：

 

第一种方案：使用transition进行过渡

 

因为里面有文字所以，我在transition里加了对文字的大小的过渡，但是在打开显示的时候文字会先显示，给人的感觉不是太好，但是在隐藏的时候因为做了处理，过渡效果还不错。暂时没有想到还有什么更好的办法解决，望万能的网友能够给点意见。

第二种方案：使用animation

使用animation就没有使用transition的那种问题，文字和div的显示就是同步的，给人的感觉就挺好的。

最后是效果图：