什么是动画
动画就是元素从一种样式过渡到另一种样式的效果
@keyframes
@keyframes规则用于创建动画，在@keyframes中规定某种css样式，就可以创建由当前样式过渡到其他样式的动画效果。
- 使用用百分比来规定发生变化的时间
@keyframes mymove {
0% {background-color: red;}
25% {background-color: green;}
50% {background-color: blue;}
100% {background-color: yellow;}
}
- 使用关键字from和to，等同于0%和100%
@keyframes mymove {
from {background-color: red;}
to {background-color: yellow;}
}
将动画绑定到div元素上
div.move {
animation: mymove 5s;
-moz-animation: mymove 5s; /* Firefox */
-webkit-animation: mymove 5s; /* Safari和Chrome */
-o-animation: mymove 5s; /* Opera */
}
animation属性
animation-name: @keyframes动画的名称
animation-duration：完成动画一个周期需要花费的秒或者毫秒。默认为0(0表示不播放动画)
animation-timing-function: 动画的速度曲线。默认是"ease"
- linear：动画从头到尾的速度是相同的
- ease：默认。动画以低速开始，然后加快，最后在结束前变慢
- ease-in： 动画以低速开始
- ease-out：动画以低速结束
- ease-in-out：动画以低速开始和结束
- cubic-bezier(n, n, n, n)：在cubic-bezier函数中设置自己的值。可能的值是从0到1的数值(数值越大速度越慢)
animation-delay：动画开始前延迟时间。默认是0
animation-iteration-count：动画播放次数。默认是1
animation-direction：动画是否在下一周期逆向播放。默认是"normal" - normal：默认。动画正常播放
- alternate：动画轮流反向播放
animation-play-state：动画是否正在运行或暂停。默认running - running：默认。动画正在播放
- paused：动画已暂停
animation-fill-mode：动画时间之外的状态 - none: 不改变默认行为
- forwards：动画完成后，保持最后一个属性(在最后一个关键帧中定义)
- backwards：在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性(在第一个关键帧中定义)
- both:向前和向后填充模式都被应用
简单的动画效果(会将之后写的一些小动画demo贴在这边)
- 文字逐渐变色
html
<div>
<p>离开我你会遇到更好的人</p>
<p>离开我你会遇到更好的人</p>
</div>
css
p {
position: absolute;
color: #ddd;
width: 176px;
}
p:nth-child(2) {
color: green;
white-space: nowrap;
overflow: hidden;
animation: 10s cg linear;
}
@keyframes cg {
from{width: 0;}
}
@-webkit-keyframes cg
{
from{width: 0;}
}
其实动画就是改变宽度，达到文字逐渐显示的目的
