Css 媒体查询和转换出现问题_Css_Media Queries

Css 媒体查询和转换出现问题

css

Css 媒体查询和转换出现问题,css,media-queries,Css,Media Queries,我的目标是当用户进入纵向模式时，图像会出现几秒钟，然后关闭。我尝试过可见性、宽度、高度和显示。这实际上不是设置属性的问题，而是时间的问题。我似乎不知道如何在进入肖像模式时切换可见性等设置，然后在几秒钟后在纯CSS中关闭它这是规格纯CSS 默认设置，因此它不会显示在横向模式下，它永远不会显示在纵向模式下，它将显示几秒钟，然后消失最外层的容器div（带有“方向”类）将是获取更改的div （可选）一旦打开，然后关闭，使其不再打开身体{ 保证金：0；填充：0； } .方向{ 位

我的目标是当用户进入纵向模式时，图像会出现几秒钟，然后关闭。
我尝试过可见性、宽度、高度和显示。这实际上不是设置属性的问题，而是时间的问题。我似乎不知道如何在进入肖像模式时切换可见性等设置，然后在几秒钟后在纯CSS中关闭它

这是规格

纯CSS
默认设置，因此它不会显示
在横向模式下，它永远不会显示
在纵向模式下，它将显示几秒钟，然后消失
最外层的容器div（带有“方向”类）将是获取更改的div
（可选）一旦打开，然后关闭，使其不再打开


身体{
保证金：0；
填充：0；
}
.方向{
位置：绝对位置；
溢出：隐藏；
排名：0；
左：0；
身高：100%；
宽度：100%；
最小宽度：200px；
最小高度：200px；
}
.方位{
位置：绝对位置；
溢出：隐藏；
身高：100%；
宽度：100%；
}
.orientation.innerDiv{
位置：绝对位置；
溢出：隐藏；
左：50%；
最高：50%；
左边距：-100px；
利润上限：-100px；
背景图像：url（'rotate.gif'）；
背景重复：无重复；
宽度：200px；
高度：200px；
}
@媒体和全部（方向：纵向）{
.方向{}
}
@媒体和所有（方向：横向）{
.方向{}
}

您可以使用CSS3动画来完成。我在JSFIDLE上做了一个示例：（减小“结果”框的宽度，使其类似于“纵向”视图）。经过我的修改后，您的代码如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .orientation {
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            min-width: 200px;
            min-height: 200px;
            opacity: 0;
        }

        .orientation .outerDiv {
            position: absolute;
            overflow: hidden;
            height: 100%;
            width: 100%;
        }
        .orientation .innerDiv {
            position: absolute;
            overflow: hidden;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            background-image: url('rotate.gif');
            background-repeat: no-repeat;
            width: 200px;
            height: 200px;
        }

        @-webkit-keyframes show-out {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes show-out {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        @media all and (orientation: portrait) {
            .orientation {
                opacity: 0;
                animation-name: show-out;
                animation-duration: 0.5s;
                 animation-delay: 2s;
                animation-fill-mode: backwards;
                animation-timing-function: linear;
            }
        }
        @media all and (orientation: landscape) {
            .orientation {}
        }
    </style>
</head>
<body>
    <div class="orientation">
        <div class="outerDiv">
            <div class="innerDiv"><img src="https://upload.wikimedia.org/wikipedia/en/2/21/EverestfromKalarPatarcrop.JPG" alt=""></div>
        </div>
    </div>
</body> 
</html>


身体{
保证金：0；
填充：0；
}
.方向{
位置：绝对位置；
溢出：隐藏；
排名：0；
左：0；
身高：100%；
宽度：100%；
最小宽度：200px；
最小高度：200px；
不透明度：0；
}
.方位{
位置：绝对位置；
溢出：隐藏；
身高：100%；
宽度：100%；
}
.orientation.innerDiv{
位置：绝对位置；
溢出：隐藏；
左：50%；
最高：50%；
左边距：-100px；
利润上限：-100px；
背景图像：url（'rotate.gif'）；
背景重复：无重复；
宽度：200px；
高度：200px；
}
@-显示webkit关键帧{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@关键帧显示出来{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@媒体和全部（方向：纵向）{
.方向{
不透明度：0；
动画名称：show out；
动画持续时间：0.5s；
动画延迟：2s；
动画填充模式：向后；
动画计时功能：线性；
}
}
@媒体和所有（方向：横向）{
.方向{}
}

澄清一下：
-显示/隐藏属性为“不透明度”（可以设置动画）
-在媒体查询“方向：纵向”中，我添加了动画属性，您可以在其中设置时间延迟（隐藏图像的效果应该开始的时间）和动画持续时间（过渡应该持续多长时间）。
-关键帧（用于webkit和其他浏览器），用于定义不透明度应如何更改

-据我所知，如果没有一些JavaScript代码，在纯CSS中“永远不再显示img”是不可能的。

我在iPhone 5S上的chrome和safari上测试了它——它在任何地方都能工作。