响应式设计 - css3动画响应式?

Question

现在有一需求
定义css3动画如下

@keyframes ani{
  0% {
    -webkit-transform: translate(0, 0);
  }
  100%{
    -webkit-transform: translate(-269px, 65px);
  }
}

作用的元素如下

.page1 .content {
  position: absolute;
}

.page1 .content.p1 {
  top: 8%;
  margin-top: -10px;
  left: -100%;
  width: 100%;
}
.page1 .content.p1.show {
  animation: ani .8s ease .2s;
  animation-fill-mode: forwards;
}

以上动画是以iphone4和iphone5的屏幕尺寸来设计的
效果为图片倾斜着飞入
iphone4/4s/5/5s/5c显示效果都良好
但是如果再进一步
要适配到iphone6/6p
动画飞入的距离translate(-269px, 65px)就出现了问题
即动画距离不够
这时应该是使用media属性来对动画进行重写吗?
如

@media screen and (min-height: 667px) {
    @keyframes ani{
        .......
        .......
    }
}

使之在iphone6/6p大屏幕下也能显示良好??

明确问题
我想问的是,css3动画如translate(x,y)是否在适配各种分辨率时都要重写以达到最好效果
有没有办法只写一次,不同分辨率下也有良好的效果,如百分比写法translate(50%,50%)
当然我知道百分比是不可行的,所以来问问有没有其他方法

Answer 1

自问自答
看这里

Answer 2

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    /*iphone 6*/
}
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    /*iphone 6 plus*/
}

最好是针对IP6来写