【CSS】简单动画Animation的实现

从小到大的动画

说明：@keyframes是动画标识；fadeInBig 是动画名称，给样式使用的。
语法：from{初始的样子或者位置}to{目标样子或者位置}

@keyframes fadeInBig {
    from{opacity: 0;transform: scale(1.3);}
        to{opacity: 1;transform: scale(1);}
}

从下往上的动画

@keyframes bottomToTop {
	from{opacity: 0; top:200px;}
		to{opacity: 1; top:0px;}
}

使用动画

说明：#edit-right-check是对应的div或者图片的id或者class。其中animation各个参数的定义是：

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

#edit-right-check {
    position: relative;
    left: 0%;
    margin-left: REM(0);
    opacity: 0;
    animation: bottomToTop 0.6s 1s linear forwards;/*动画名称等参数*/
    -webkit-animation: bottomToTop 0.6s 1s linear forwards;/*针对webkit内核*/  
}