如何在媒体查询中正确切换此动画关键帧？

Question

我有一个动画关键帧，我希望在针对设备横向的媒体查询中进行调整。当设备处于横向模式并且页面被刷新时，我已经获得了它来切换关键帧，但是我希望它在方向更改时自动切换关键帧，而不需要刷新页面。

这里是CSS：

@keyframes slide { 
    0% { 
    transform: translate3d(0px, 0px, 0px); 
    } 
    20% { 
    transform: translate3d(0px, 130px, 0px); 

    } 
    100% { 
    transform: translate3d(0px, 0px, 0px); 
    } 
} 
.animated-object { 
    position: relative; 
    animation: slide 2s infinite; 
} 

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 
    @keyframes slide { 
    20% { 
     transform: translate3d(0px, 13px, 0px); 
    } 
    } 
} 

我如何获得这个关键帧切换自动在该设备被旋转到横向，而不需要刷新？

Answer 1

我对您的代码进行了一些更改。在这里检查。

HTML

<div class="animated-object">Animate Object<div> 

CSS

body { 
    font: 150%/1.5 Arial; 
    text-align: center; 
    margin-top: 5em; 
} 

.animated-object { 
    animation: bounce .6s alternate infinite ease-in; 
    color: red; 
    display: inline-block; 
} 

@keyframes bounce { 
    0% { 
     transform: translateX(50%); 
    } 
    100% { 
     transform: translateX(-50%); 
    } 
} 


@media only screen 
and (min-width : 100px) 
and (max-width : 700px) 
and (orientation : landscape) { 
    @keyframes bounce { 
    0% { 
     transform: translateY(-200%); 
    } 
    100% { 
     transform: translateY(0); 
    } 
    } 
    .animated-object{ 
    color: green; 
    display: block; 
    } 
} 

对于演示 http://codepen.io/l3ikrant/pen/eZNrgK