正文

带有 CSS 动画的媒体查询

 2023-03-06  104

关键词：

【中文标题】带有 CSS 动画的媒体查询【英文标题】：Media queries with CSS animations 【发布时间】：2012-01-01 15:26:53 【问题描述】：

我在这里尝试了一些繁重的 CSS3 内容，并遇到了一些我希望可以解决的问题：

1 - 我有一个在您加载页面时会滑入的框。比方说：

#box 
    animation-duration: 3.5s;  
    animation-name: slidein;


@keyframes slidein   from  top: 0;   to  top: 100%;

但是，在我的媒体查询中，由于一些调整大小，我需要将其修改为：

@media only screen and (min-width: 768px) 
    @keyframes slidein   from  top: 0;   to  top: 80%;

我认为我可以保持动画名称不变，并在 @media 查询之一中重新定义关键帧，但这似乎不起作用。为什么？（是的，我设置了正确的前缀）

2 - 我的解决方案是为每种尺寸定义不同的动画：

#box 
    animation-duration: 3.5s;  
    animation-name: slidein;


@keyframes slidein   from  top: 0;   to  top: 100%; 
@keyframes slidein-low   from  top: 0;   to  top: 80%; 

@media only screen and (min-width: 768px) 
    #box  
        animation-name: slidein-low;

但是，现在在调整网站大小后，动画将在遇到其中一个媒体查询后重新开始。我只希望动画播放一次（无论大小如何，甚至之后调整大小），就是这样。所以除非有#1的解决方案，否则我相信这是因为当检测到查询时，它有点“重新启动”它的CSS？

【问题讨论】：

【参考方案1】：

我假设您正在为可能具有 1024 最大宽度的较小屏幕执行最小宽度？因此，也许也可以尝试将其放入：

@media only screen and (min-width: 768px) and (max-width:1024px) 
    #box  
        animation-name: slidein-low;

甚至可以尝试将动画构造也放入查询中：

@media only screen and (min-width: 768px) and (max-width:1024px) 

    @keyframes slidein-low   from  top: 0;   to  top: 80%; 

    #box  
        animation-name: slidein-low;

我确定您已经访问过此网站，但以防万一您还没有，这里有一个很好的媒体查询参考：

http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

【讨论】：

【参考方案2】：

从我的实验中，我发现 Safari 5（适用于桌面和 iOS）肯定会以您希望使用任一解决方案的方式呈现您的页面。另一方面，如果将 @-moz-keyframe 或 -moz-animation 规则放在 @media 块中，Firefox 9 似乎不尊重它们（并且都忽略了 W3C @keyframe 和非供应商特定的动画属性）

【讨论】：

css带有模板区域和媒体查询的css网格(代码片段)

查看详情

如何在带有 javascript 条件的媒体查询中使用 css？

】如何在带有javascript条件的媒体查询中使用css？【英文标题】：Howtousecssinmedia-querieswithajavascriptcondition?【发布时间】：2021-11-1502:18:33【问题描述】：我正在使用此组织结构图https://codepen.io/erinesullivan/pen/LLoXoL。基本上我想做的是... 查看详情

带有媒体查询的 chrome 中的错误

】带有媒体查询的chrome中的错误【英文标题】：buginchromewithmediaqueries【发布时间】：2013-08-1913:50:33【问题描述】：我对chrome中的媒体查询有一个奇怪的问题我在页面中的某些元素中添加了transition，并创建了例如3种媒体查询状态... 查看详情

可以使用带有 CSS ::after 和 ::before 标签的媒体查询吗？

】可以使用带有CSS::after和::before标签的媒体查询吗？【英文标题】：CanusingmediaquerywithCSS::after&::beforetag?【发布时间】：2022-01-1615:41:44【问题描述】：我使用after标记在定价表中显示自定义内容。它确实适用于桌面屏幕，但不显... 查看详情

带有 display:none 和媒体查询的响应式 CSS

】带有display:none和媒体查询的响应式CSS【英文标题】：ResponsiveCSSwithdisplay:noneandmediaqueries【发布时间】：2013-05-1820:30:51【问题描述】：我确信这是一个非常基本的问题，所以提前道歉，因为我是新手。我正在开发一个设计为移动... 查看详情

带有一些 LESS 魔法的花式媒体查询

】带有一些LESS魔法的花式媒体查询【英文标题】：FancyMediaQuerieswithsomeLESSMagic【发布时间】：2013-03-2802:20:29【问题描述】：如果使用less在一些css类中包装不同分辨率的css样式会很好。我想做这样的事情：footerwidth:100%;.tabletfooterwid... 查看详情

Vue.js：无法使用带有 CSS 媒体查询的侧边栏隐藏 div

】Vue.js：无法使用带有CSS媒体查询的侧边栏隐藏div【英文标题】：Vue.js:CannothideadivwithasidebarwithCSSmediaqueries【发布时间】：2018-08-0515:47:02【问题描述】：我试图用这个方法用我的侧边栏隐藏一个div：/*Formobilephones:*/@media(max-width:576p... 查看详情

带有纯 CSS3 媒体查询的 IE9 响应式图像调整大小问题

】带有纯CSS3媒体查询的IE9响应式图像调整大小问题【英文标题】：IE9responsiveimageresizeissuewithpureCSS3mediaquery【发布时间】：2014-02-1323:06:46【问题描述】：我尝试设置响应式布局设计。我的问题是：在1024*768屏幕分辨率下，没有滚动... 查看详情

带有引导程序的媒体查询不起作用

】带有引导程序的媒体查询不起作用【英文标题】：mediaquerieswithbootstrapnotworking【发布时间】：2015-01-0419:11:48【问题描述】：我想为移动设备隐藏大图片。看着atthissite我在我的css中放了以下样式：//medium+screensizes@media(min-width:992px... 查看详情

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

】如何在媒体查询中正确切换此动画关键帧？【英文标题】：HowdoIproperlyswitchthisanimationkeyframeinamediaquery?【发布时间】：2016-06-1417:13:49【问题描述】：我有一个动画关键帧，我想在针对设备横向方向的媒体查询中对其进行调整。... 查看详情

针对特定设备的 CSS3 媒体查询

...ice【发布时间】：2013-01-0103:19:03【问题描述】：我有一个带有基本CCS的wordpress主题，现在我想让这个设计响应下面提到的大多数使用的设备布局。我想以横向和纵向模式定位所有苹果设备：-blackberry(320x240),iphone3(320x480),iphone4(640x9... 查看详情

如何使用 CSS 媒体查询区分移动和屏幕？

...在手机、平板电脑还是PC上。我正在无限网格中构建一个带有1000个小拇指的图像网格。每个拇指为125像素，在我的笔记本电脑（MacBook13英寸）上，我可以轻松地查看详情

带有媒体查询的设备方向[重复]

】带有媒体查询的设备方向[重复]【英文标题】：Deviceorientationwithmediaqueries[duplicate]【发布时间】：2019-09-2206:13:07【问题描述】：当屏幕的最小宽度为1025像素以及移动设备水平旋转时，我希望将某些功能应用于页面。我正在尝试... 查看详情

Angular2 动画媒体查询

】Angular2动画媒体查询【英文标题】：Angular2animationsmediaqueries【发布时间】：2016-12-1208:01:14【问题描述】：我一直在玩Angular2的动画DSL，但我对如何将动画限制在特定的媒体屏幕尺寸感到有点困惑。例如，假设我在主页上有一个40... 查看详情

我可以使用 javascript / jQuery 更改媒体查询吗？

...ry?【发布时间】：2021-12-0402:34:00【问题描述】：我有一个带有媒体查询的style.css。在我的javascript文件中，我有一个存储在变量中的所需移动宽度的值。通过更改变量，我想自动更改媒体查询的值。是否有可能用javascript改变.css文... 查看详情

css3媒体查询的学习。

1、什么是媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的... 查看详情

带有内联样式表和媒体查询的 Razor 视图 [重复]

】带有内联样式表和媒体查询的Razor视图[重复]【英文标题】：Razorviewwithinlinestylesheetandmediaquery[duplicate]【发布时间】：2013-11-1014:46:51【问题描述】：我正在处理一个.cshtml页面，该页面需要一些基本的内联样式，仅用于打印。我... 查看详情

css3的学习

...更好看的网页。 css3扩展内容中，我认为好用的有：动画，选择器，用户界面，多列布局等，运用这些可以使用户界面变得更加美观。在我看来媒体查询也比较好用，代码也比较简单。媒体查询：媒体查询(mediaquer 查看详情