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

Posted 2023-03-06

【中文标题】如何在媒体查询中正确切换此动画关键帧？

【英文标题】：How do I properly switch this animation keyframe in a media query?

【发布时间】：2016-06-14 17:13:49

【问题描述】：

我有一个动画关键帧，我想在针对设备横向方向的媒体查询中对其进行调整。我已经让它在设备处于横向并且页面刷新时切换关键帧，但是我希望它在方向更改时自动切换关键帧而无需刷新页面。

这是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);
    
  

如何让这个关键帧在设备被旋转成横向而不需要刷新时自动切换？

【参考方案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

【参考方案2】：

我刚刚做了类似的事情我基本上创建了@keyframes slidePortrait和@keyframes slideLandscape

然后用@media screen and (orientation:landscape)调用slideLandscape和@media screen and (orientation:portrait)调用slidePortrait