CSS微动画 - 有始有终！心得跟最後动画分享

Q: 第 30 天了，心中有没有很兴奋？
A: 好紧张耶.. 最後一天了来个结语～～

之前从来没有想过要参加铁人赛

当初的对话是这样的...

同事A：「走啊！一起参加铁人赛」
（犹豫了3秒（？）
「好」

然後就入坑了，差点没被另一位同事打死，毕竟每天已经在一堆坑里爬来爬去，现在又往另一个很深的坑跳，已经被称作是自虐式的疯狂！！

题目选择上斟酌了很久

犹豫的时间只花了3秒，答应後马上被拉进群组（挖～好多人阿），题目都还没想好，现在想来好像有点太冲动了！但既然决定上了，总是要挑一个有把握的题目来写，当时在Css跟Angular之间徘徊了很久，最後因为「Angular已经很多从零到有的教学影片跟文章了」选择Css下手，而这也是相当有把握的项目！

参赛以来的心情～错综复杂

为了启发灵感，查查网路上的范例做参考是必要的！因为一个人的思想是有限的，所以如果可以将其他人的创意跟自己的功力结合，就会有无限的可能。在9月底时因为假日需要外出，在外出前要把内容都先想好，那几天都炸了很多脑细胞，不过即便如此，在参赛的过程中除了分享范例及属性以外，自己也等於是把所有内容复习了一遍，也是受益良多。

对自己小小骄傲 ＆ 对大家心怀感激

『邦友 xxx 订阅您的铁人系列文「CSS 让你的网页动起来」，好文受到关注，继续加油！』
第一次参加铁人赛，在发文的过程中偶尔会收到订阅通知，看到时真是让人心中替自己感到小小骄傲，谢谢大家的关注，今天终於完赛了！

最後来个第一篇的范例吧

第一篇的时候在目录栏有个小范例，本篇将用一样的效果来个Ending，在这最後一篇把程序码补上，算是让一切有始有终～

<style>
  .text {
    color: Chocolate;
    font-size: 60px;
    font-weight: bolder;
    letter-spacing: 5px;
    text-shadow: 0 0 3px Chocolate;
    animation: textAnimation 1.2s infinite;
  }
  @keyframes textAnimation {
    50% {
      text-shadow: 0 0 3px Chocolate, 8px 8px 3px SandyBrown, 16px 16px 3px PeachPuff;
    }
  }
</style>

<div class="text">The End</div>

第一次参加铁人赛
感谢大家 30 天以来的关照