HTML
html结构非常简单：用一个wrapper div作为包裹容器，里面放一个用于显示信息的p标签和一个用来做进度条的div。
Your settings have been saved successfully!
为了给包裹div设置不同的颜色，给它设置两个class：tn-box和tn-box-color-1。
CSS
.tn-box {
width: 360px
position: relative
margin: 0 auto 20px auto
padding: 25px 15px
text-align: left
border-radius: 5px
box-shadow:
0 1px 1px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.6)
opacity: 0
cursor: default
display: none
}
.tn-box-color-1{
background: #ffe691
border: 1px solid #f6db7b
}
设置包裹div的初始dispaly:none，并给设置它的透明度为0。
进度条的样式如下：
.tn-progress {
width: 0
height: 4px
background: rgba(255,255,255,0.3)
position: absolute
bottom: 5px
left: 2%
border-radius: 3px
box-shadow:
inset 0 1px 1px rgba(0,0,0,0.05),
0 -1px 0 rgba(255,255,255,0.6)
}
动画开始前，进度条的宽度为0。
在demo中，使用一个checkbox来作为按钮触发消息提示框动画。
input.fire-check:checked ~ section .tn-box {
display: block
animation: fadeOut 5s linear forwards
}
input.fire-check:checked ~ section .tn-box .tn-progress {
animation: runProgress 4s linear forwards 0.5s
}
因为按钮的动作发生在消息提示框之前，所以可以使用一般通用选择器来完成按钮操作。
如果你想使用javascript来完成按钮动作，你可以像下面这样写样式：
.tn-box.tn-box-active {
display: block
animation: fadeOut 5s linear forwards
}
.tn-box.tn-box-active .tn-progress {
animation: runProgress 4s linear forwards 0.5s
}
tn-box-active是在按钮按下时被加到tn-box div中的class。
下面是消息框淡入淡出动画效果：
@keyframes fadeOut {
0% { opacity: 0}
10% { opacity: 1}
90% { opacity: 1transform: translateY(0px)}
99% { opacity: 0transform: translateY(-30px)}
100% { opacity: 0}
}
下面是进度条的动画效果：
@keyframes runProgress {
0% { width: 0%background: rgba(255,255,255,0.3)}
100% { width: 96%background: rgba(255,255,255,1)}
}
我们使它运动到进度条宽度的96%，颜色上使用RGBA。
PostCSS 是使用 JS 插件来转换 CSS 的工具，支持变量，混入，未来 CSS 语法，内联图像等等。PostCSS 已经被许多大公司使用：谷歌，推特，阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件是最流行的 CSS 处理器插件之一。
PostCSS 可以作为预处理器使用，类似：Sass, Less 和 Stylus。但是 PostCSS 是模块化的工具，比之前那些快3-30 倍，而且功能更强大。
PostCSS 包括 CSS 解析器，CSS 节点树 API，一个源映射生成器和一个节点树 stringifier。
简而言之，PostCSS是CSS变成JavaScript的数据，使它变成可操作。PostCSS是基于JavaScript插件，然后执行代码操作。PostCSS自身并不会改变CSS，它只是一种插件，为执行任何的转变铺平道路。
本质上是没有很制PostCSS插件操纵CSS，也就是说它可以适用于任何CSS。只要你能想到的，你都可以编写一个PostCSS插件，让它来转成CSS。
PostCSS插件可以像预处理器，它们可以优化和autoprefix代码；可以添加未来语法；可以添加变量和逻辑；可以提供完整的网格系统；可以提供编码的快捷方式......还有很多很多。
事实上，使用PostCSS插件你可以做任何你想做的任何事情，但PostCSS相对而言还是较新，这也导致了一些误解，工具实际上是什么。
许多人（包括我自己在内）对PostCSS没有一个完整的印象，PostCSS实际是什么，并因此错过了PostCSS可以提供什么。
![[CSS] svg路径动画](/aiimages/%5BCSS%5D+svg%E8%B7%AF%E5%BE%84%E5%8A%A8%E7%94%BB.png)
