小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
transform和translate是用来干什么的？
- 实现一个进度条加载，从0 到100
- 实现一个环形进度条
transform: translate(200px,50px); 元素较原先的位置，往右移动 200px，往下移动 50px
animation能干啥呢？
animation: name duration timing-function delay iteration-count direction fill-mode play-state; 说明
- animation-name指定要绑定到选择器的关键帧的名称
- animation-duration动画指定需要多少秒或毫秒完成
- animation-timing-function设置动画将如何完成一个周期
- animation-delay设置动画在启动前的延迟间隔。
- animation-iteration-count定义动画的播放次数。
- animation-direction指定是否应该轮流反向播放动画。
- animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
- animation-play-state指定动画是否正在运行或已暂停。
- initial设置属性为其默认值。 阅读关于 initial的介绍。
- inherit从父元素继承属性。 阅读关于 initinherital的介绍。
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
transition
transition-property规定设置过渡效果的 CSS 属性的名称。
transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。
transition-delay定义过渡效果何时开始。ss中配合:hover, :active等伪类使用,实现相应等动画效果。
过渡分为两个阶段：前进（forward）和反向（reverse），下面会用具体的例子来详细讲述这两个阶段。
- 只在非hover状态设置transition 该状态下设置的transition认为设置了反向状态的过渡动画，即鼠标移到元素上又离开时的动画，而此时前进状态和反向状态保持一致，也就是说鼠标移到和移开元素都有过渡动画。
.app {
width: 300px;
transition: all 3s linear .2s;
}
.app:hover {
width: 100px;
}
- 只在hover状态下设置transition
该状态下设置的transition认为设置了前进状态的过渡动画，而此时反向状态是没有动画的。也就是说鼠标移到元素上会有动画，移出元素没有动画，元素宽度会瞬间还原。
.app {
width: 300px;
}
.app:hover {
width: 100;
transition: all 3s linear .2s;
}
- 同时在hover和非hover状态下都设置transition 此时即设置了前进状态也设置了反向状态的动画，鼠标移到元素上动画持续1s,鼠标移出元素动画持续3s。
.app {
width: 300px;
transition: all 3s linear .2s;
}
.app:hover {
width: 100;
transition: all 1s linear .2s;
}
