css3动画的实现

### 首先最重要的两个

++ animation css属性至少有 : 2个值 animation : name 5s

简写　:

myfirst	5s	linear(ease)	2s	infinite(33)	alternate(normal)
name	duration	timing-function	delay	iteration-count	direction
动画名	动画总时长(默认0s)	匀速(先快后慢)(默认ease)	开始时间(默认0s)	循环无限次(33次)(默认1)	倒着放(正着放)(默认正着)

animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

.swiper-container.swiper2 .swiper-mask {
    display: none;
    background-color: rgba(0, 0, 0, .5);
    position: absolute;
    width: 270px;
    height: 360px;
    top: 0;
    left: 0;
    z-index: 70;
    animation: getintoContainer 1s ease infinite alternate;
    /* Firefox: */
    -moz-animation: getintoContainer 1s ease infinite alternate;
    /* Safari 和 Chrome: */
    -webkit-animation: getintoContainer 1s ease infinite alternate;
    /* Opera: */
    -o-animation: getintoContainer 1s ease infinite alternate;
}

　　++ @keyframes 定义动画的过程还有一种 from to 形式没这个好用, 这个可以定义动画进行到 25% 或其它进程时进行什么动画.

@keyframes getintoContainer {
    0% {
        left: 15px;
        top: 15px;
        width: 240px;
        height: 330px;
        background-color: rgba(0, 0, 0, 0);
    }

    100% {
        left: 0px; 
        top: 0px; 
        width: 270px;
        height: 360px;
        background-color: rgba(0, 0, 0, .5);
    }
}

猜你喜欢