IFE2018 CSS-Animation 笔记1

No1任务地址

知识点

• transtion
• 伪类

核心

这个动效的难点是，需要点击后下划线从中间开始延伸。
一开始咋一看可能想不到，但是我们只需要将动画分解一下。

• 从中间开始
• 向右
• 向左

从中间开始和向右（向左）可以合成一步。

text::after{
  left: 50%;   /*从中点开始*/
  width: 0;    /*初始状态*/
  transition: all 0.3s;
}
text.active::after{
  width: 100% ;   /*开始动画*/
}

这样就完成了单向向右移动，这时只需要再让它同时向左移动就完成了。

left: 0;