关于css3动画中遇到的问题
2015-05-28 12:15 tingting4133 阅读(188) 评论(0) 编辑 收藏 举报.t1 {
background: url(images/P1-01.png) no-repeat 0 0;
background-size: 150px 180px;
width: 150px;
height: 180px;
left: 50px;
top: 554px;
opacity: 0;
-webkit-transform-origin: 0 100%;
-webkit-transform: scale(0) translate(-700px, 0px);
}
.t1.show {
-webkit-animation: swap 0.8s linear forwards;
}
@-webkit-keyframes swap {
0% {
opacity: 0;
-webkit-transform-origin: 0100%;
-webkit-transform: scale(0) translate(-700px, 0px);
}
100% {
opacity: 1;
-webkit-transform-origin: 100% 100%;
-webkit-transform: scale(1) translate(0px, 0px);
}
}
这里面的动画用了 -webkit-transform-origin: 100% 100%; 用百分比的~ 但是动画效果显示是有问题的,所以我把对应的改成top right,bottom right之后就可以执行动画了;