@keyframes
基本写法是一个开始状态和一个结束状态：
css
@keyframes demo-anim {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
See the Pen QNbBOy by Oliver (@ochukai) on CodePen.
其中 animation-iteration-count: number or infinite; 可以设置循环次数，infinite为无限次
还可以定义的很详细：
```css
@keyframes demo-anim {
from {
transform: translate继续阅读 »
content
{:toc}
My girlfriend is learning html and css recently. I told her to follow the video. Here, I recommend a video in Chinese that suite for fresh learners. The name of course is Getting HTML web pages dev in 8 hours ( 8小时学会HTML网页开发 ) . I watched this video at very first time. The teacher named Eighteen Swallows继续阅读 »
最近在写一个动画效果，使 ul 下面的 li 逐个进入，就像下图
做这个效果用到了 css 的 animation 中 animation-delay，给 li 设置入场动画后，再给 li 设置 animation-delay，像这样：
css
.li-animation-delay-1 {
animation-delay: 0.1s;
}
并且每一个 li 的 animation-delay 都比前一个 li 的长 .1s，也就达到了后面的 li 的入场动画后播放的效果。
因为 li 的数量也不确定，所以我打算批量生成一些 li-animation-delay-*, 查了一下 scss 正好有 for 的用法：继续阅读 »