animation初探

animation也是css3里面一种特别牛逼的效果

先来看一个例子

.bgor.show {
    animation: bubbleFadeIn 1s ease-out 0s 1 forwards;
    -webkit-animation: bubbleFadeIn 1s ease-out 0s 1 forwards;
}

@keyframes bubbleFadeIn
{
from {opacity: 0; -webkit-transform: scale(0,1); transform: scale(0,1);}
to {opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1);}
}

@-moz-keyframes bubbleFadeIn /* Firefox */
{
from {opacity: 0; -webkit-transform: scale(0,1); transform: scale(0,1);}
to {opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1);}
}

@-webkit-keyframes bubbleFadeIn /* Safari 和 Chrome */
{
from {opacity: 0; -webkit-transform: scale(0,1); transform: scale(0,1);}
to {opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1);}
}

@-o-keyframes bubbleFadeIn /* Opera */
{
from {opacity: 0; -webkit-transform: scale(0,1); transform: scale(0,1);}
to {opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1);}
}

我们写了一个类，同时拥有bgor和show的标签会执行这个动画，水平方向放大渐入

animation里面写了5个属性

1. 要执行的动画函数名：bubbleFadeIn
2. 动画执行的时间：1s
3. 动画执行速度的效果：ease-out（缓慢结束）
4. 开始前的等待时间：0s
5. 动画播放次数：1次
6. 动画执行之后的状态：forwards（保持动画最后一帧的状态）

你可以像我一样定义函数时设置 from 和 to 也可以设置 0%~100%

例如：

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

这样为动画设置更多的效果。

最后我们来说一下animation的10个属性

• @keyframes 规定动画（动画函数，动画的效果）
• animation 所有动画属性的简写属性，除了 animation-play-state 属性
• animation-name 规定 @keyframes 动画的名称
• animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0
• animation-timing-function 规定动画的速度曲线。默认是 "ease"（可选：ease，ease-in，ease-out，ease-in-out，自定义 cubic-bezier(0,0.3,0.85,1)）
• animation-delay 规定动画开始前等待时间。默认是 0
• animation-iteration-count 规定动画被播放的次数。默认是 1
• animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"（可选：正常 normal，轮流反向 alternate）
• animation-play-state 规定动画是否正在运行或暂停。默认是 "running"（可选：暂停 paused，播放 running）
• animation-fill-mode 规定对象动画时间之外的状态（可选：默认 none，保持最后一帧效果 forwards，最初效果 backwards，前后都应用 both）

转载于:https://my.oschina.net/xuezhiyuan/blog/780881