代码改变世界

关于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之后就可以执行动画了;