图片翻转，上下跳动（css3）

图片翻转

1. html

<div class="Img">   
	<img class="rotatesimg" src="images/myImg.png" />
</div>

2. css

.Img .rotatesimg {
    -webkit-animation: transform-5 1.5s ease 500ms alternate none 1;
    animation: transform-5 1.5s ease 500ms alternate none 1;
}
@-webkit-keyframes transform-5 { 
	from{   
		-webkit-transform:perspective(400px) rotateY(91deg);
		transform:perspective(400px) rotateY(91deg);
	} 
    to{
    	-webkit-transform:perspective(400px) rotateY(0deg);
    	transform:perspective(400px) rotateY(0deg);
    } 
}
@keyframes transform-5 { 
	from{
		-webkit-transform:perspective(400px) rotateY(91deg);
		transform:perspective(400px) rotateY(91deg);
	} 
    to{
    	-webkit-transform:perspective(400px) rotateY(0deg);
    	transform:perspective(400px) rotateY(0deg);
    } 
}

上下弹跳

1. html

<div class="goods">
	<img src="images/db.png" />
</div>

2. css

.goods img {
    animation: myfirst 1.5s infinite;    //无限次跳动   infinite
}

@keyframes myfirst {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(0px, -9px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}