Achieve css3 animation

 

### First, the two most important 

 

 ++ animation css attributes at least: two values ​​of animation: name 5s

Shorthand: 

myfirst	5s	linear(ease)	2s	infinite(33)	alternate(normal)
name	duration	timing-function	delay	iteration-count	direction
Animation name	Animation time (default 0s)	Constant speed (slow down after) (default ease)	Start time (default 0s)	Infinite loop (33) (default 1)	Backwards put (put forward positive) (positive with default)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

animation-name	It specifies the name of @keyframes animation.	3
animation-duration	Seconds or milliseconds predetermined animation completes takes one cycle. The default is 0.	3
animation-timing-function	Prescribed speed of the animation curve. The default is "ease".	3
animation-delay	When the provisions of animation begins. The default is 0.	3
animation-iteration-count	Provisions Animations are played. The default is 1.	3
animation-direction	Whether the provisions of the animation to play in reverse to the next cycle. The default is "normal".	3
animation-play-state	Whether the provisions of the animation is running or paused. The default is "running".	3
animation-fill-mode	The provisions of the state outside the object animation time.	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 custom animation process there is a no from to form this easy to use, this may be what defined animation animation or other processes 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);
    }
}