keyframe_编程技术问答社区_程序员问答知识库

以下是关于 keyframe 的编程技术问答

CSS lint解析错误-预期LBRACE错误

需要一些帮助. 在CSS棉布中查看我的CSS时，它们会不断报告一个解析错误，即"预期的lbrace错误" 这是问题的屏幕截图:屏幕截图他们在我的闭幕式上显示问题.我几次检查了我的代码，但找不到，可能是问题所在. 如果我更改键框前缀顺序，我意识到的是，错误在不同的行上显示(因此并非总是在闭合支架上) 这是我的代码，请看一下，让我知道是否有人在那里看到错误，这是什么，谢谢您: .flat-desktop-content { background: url("../images/flat-desktop-content.svg") no-repeat scroll 0 0 transparent; background-size: cover; width: 360px; height: 290px; position: absolute; top: 0; left: 0; z-index: 9;

6 2023-05-20 编程技术问答社区 parsing keyframe csslint

css幻灯片背景加载缓慢

我使用CSS为我的背景做了一个简单的幻灯片，因为我使用的是钥匙帧，所以我不知道如何使所有背景使用背景大小:cover:cover.我希望所有图片适当地适合屏幕. 还需要2秒钟的时间才能加载该网站. (它只是显示白色，然后您看到图片负载) 最后，我还想使网站负责，例如，根据屏幕尺寸，使背景图片更改大小. 如果我使用普通 body { background-image: url("picture.jpg"); } 然后我会使用@Media，但是在这种情况下，我不知道有什么作用. 您还可以看到，我做了很多数字％，我试图使图片在屏幕上保持更长的时间，同时更快地进行旋转动画. 这是我的CSS(我知道这是制作背景幻灯片的一种愚蠢的方式，但最简单:)) body { background-size: cover; animation: div 25s infinite; height: 100vh; margin: 0; }

14 2023-05-16 编程技术问答社区 javascript html css keyframe

溢出属性的动画化

我需要为第一个密钥帧设置overflow: hidden设置overflow: hidden，而overflow: visible(并保留). 我正在尝试此操作，但最后，overflow仍然是hidden. 如何解决此问题? 2包括SCSS polifill Mixin. @include keyframes(open) { 0% { height: 0; overflow: hidden; } 100% { height: $main_menu_height; overflow: visible; } } #main-menu-box { overflow: hidden; height: 0; &.opened{ @include animation('open 200ms ease-out 0s 1 normal forwards'); } } 解决方案

0 2023-05-15 编程技术问答社区 css overflow css-animations keyframe

从视频中提取关键帧

我需要从视频/流中提取关键帧.因此，是否有任何标准实现. 我正在使用开放的简历. (目前，我每秒都在提取帧，这需要较慢才能提高性能.) 因此，如果有人优化实施，请在此处回复. 解决方案使用FFMPEG您可以使用以下代码提取所有关键帧: ffmpeg -vf select="eq(pict_type\,PICT_TYPE_I)" -i yourvideo.mp4 -vsync 2 -s 160x90 -f image2 thumbnails-%02d.jpeg ffmpeg命令行中的下面-VF是filterGraph描述.选择过滤器选择要传递输出的帧.过滤器的常数为" pict_type"和值" pict_type_i".因此，FFMPEG仅将密钥帧传递到输出. -vsync 2可防止ffmpeg为每个关键帧生成多个副本. -f Image2将视频帧写入图像文件.输出文件名是通过模式指定的，该模式可用于生成依次编号的文件系列文件.该模式可能包含字符串"％d"

4 2023-05-09 编程技术问答社区 opencv computer-vision keyframe

合并json-object并填充next/prev项目

i pre 如何填充一个包含一些CSS培训的JSON-OBJECT.在哪里需要将所有不含糊的属性添加到上一个对象，而所有下一个UP项目都相同? 我需要的语句: if (property is not in object) object[property] = $('.foo').css(property); 我们有一个具有以下样式的元素: .foo { top: 0; width: 100px; } 和以下keyframe - 类似对象: var keyframe = { 0: { top: 0 }, 1000: { top: 100 }, 2000: { width: 100 } }; 在这里，我们需要填充所有以前的项目，在这种情况下: 0: width = 0 1000: width = 0 ...我们得到这样的东西:

0 2023-05-03 编程技术问答社区 javascript json object for-loop keyframe

从视频中提取关键帧信息和字节偏移 ffmpeg/ffprobe

如何使用ffmpeg/ffprobe从视频中检索每个密钥帧信息. 我已经阅读了很多关于此的stackoverflow问题和答案我已经使用此命令提取键帧持续时间 ffprobe -loglevel error -skip_frame nokey -select_streams v:0 -show_entries frame=pkt_pts_time -of csv "/var/www/html/YoutubeTesting/1080p.mp4" 但是我从每个密钥帧中需要的信息是 1-字节偏移视频字节大小 2-键帧的持续时间谢谢！解决方案使用 ffprobe -loglevel error -skip_frame nokey -select_streams v:0 -show_entries frame=pkt_duration_time,pkt_pos -of csv "video.mp4" 其他解决方案您可以获取键帧偏移字

18 2023-04-20 编程技术问答社区 video ffmpeg keyframe ffprobe

如何改变关键帧的时间间隔？

如何使用FFMPEG将密钥帧间隔设置为5秒? 解决方案您需要重新编码.将X264的键入参数设置为5*fps并禁用SceneCut.例如，如果您的FPS是24: ffmpeg -i -vcodec libx264 -x264-params keyint=120:scenecut=0 -acodec copy out.mp4 这显然对质量不是最佳的，但它会符合您的需求. 按照叹息的建议编辑为更改为scenecut=0. 其他解决方案叹气. 关于no-scenecut选项的错误信息的持续时间比我记得的时间更长.切勿输入no-scenecut. 的值可以找到指向文档的链接在这里. 对于FFMPEG，您需要使用以下两个开关: -g 120将定义一个120帧的共和党，以创建五秒钟的共和党，以23.976fps的内容.这与no-scenecut选项一起起作用. -x264opts no-scenecut将强制根据FFMP

10 2023-04-20 编程技术问答社区 ffmpeg keyframe

如何在CSS动画中使用CSS动画改变字体颜色

我正在尝试做到这一点，因此当我打开页面时，test将显示为红色，testing将显示为白色.我想保留页面时使用的延迟时间(如果您运行程序，您将看到). CSS #hero h1 { display: block; width: fit-content; font-size: 3rem; position: relative; color: transparent; animation: text_reveal .5s ease forwards; animation-delay: 1s; } #hero h1 .slide { position: absolute; top: 0; left: 0; height: 100%; width: 0; background-color: crimson; animation: text_reveal_box 1s ease; animation-delay: .5s;

8 2023-04-13 编程技术问答社区 html css css-animations keyframe

如何防止页面加载时出现css关键帧动画？

我的页面上有一些CSS动画，其中包含关键框架的fadein/Out元素.问题是当我加载页面时显示淡出动画. html: Toggle display I move nicely! CSS: .box { height: 0; opacity: 0; animation: FadeOut 1s ease-in-out; } .box.active { height: initial; opacity: 1; animation: FadeIn 1s ease-in-out; } @keyframes FadeIn { 0% { opacity: 0; height: initial; } 100% { opacity: 1; height: initial; } } @keyframes

24 2023-04-13 编程技术问答社区 javascript css css-animations keyframe

使用CSS3关键帧对divs的滑动进行动画处理，但divs会推动其他divs

我在不使用JavaScript的情况下制作滑动导航栏. 除了一件事外，一切都很好:当Divs到达最终位置时(在密钥框架的100％处)，左DIV将顶部Div推到文档的底部. 我已经尝试了位置:绝对，但这是无济于事的.我尝试将DIV的宽度设置为6％，而顶部DIV宽度设置为94％，但是当用户收缩他或她的浏览器时，它会立即断开. html: This is sparta! This is not Sparta! CSS: /* LEFT SIDEBAR*/ #left_bar { -webkit-animation:myFirst 3s; /* Safari and Chrome */ -webkit-animation-fill-mode: forwards; font-size: .2px; padding-left: 5px; float:

14 2023-04-13 编程技术问答社区 html css keyframe

创建动态梯度按钮背景的CSS

我正在寻找CSS规则，该规则可以创建CSS 按钮的彩色梯度背景. 我只是想和它一起玩，并做到了: https://codepen.io https://prashant-nadsoftdev/pen/bkzorb . 在 .custom-btn { background: linear-gradient(105deg, #f6d365, #fda085, #f6d365, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3); background-size: 200% 200%; -webkit-animation: rainbow 5s ease infinite; -z-animation: rainbow 5s ease infinite; -o-animation: rainbow 5s ease infinite; an

2 2023-04-12 编程技术问答社区 css button css-animations linear-gradients keyframe

在点击时来回运行css动画

使用CSS @keyframes单击元素时，我正在尝试将某些动画附加到元素上. .animate { animation-name: action; animation-duration: 2s; animation-timing-function: linear; background-color: green; } @keyframes action { 0% { background-color: gray; } 50% { background-color: red; } 100% { background-color: green; } } demo .animate类添加在单击中，盒子从灰色到绿色的框动画.但是现在，当我再次单击它时，我想回到灰色(切换功能).我尝试使用animation-direction: reverse使用相同

22 2023-04-12 编程技术问答社区 css css-animations keyframe

@keyframes不支持阿拉伯语

我尝试用@keyframes编写一个阿拉伯语的句子，但@keyframes不支持阿拉伯语，并带有难以理解的字符 .caption { background-color: black; } .caption h1::after { animation: move 3s infinite; content: ""; border-left: 1px solid #fff; color: #fff !important; } @keyframes move { 0% { content: "م" } 10% { content: "مر" } 20% { content: "مرح" } 30% { content: "مرحب" } 100% { content: "مرحباً" } }

16 2023-04-12 编程技术问答社区 html css sass css-animations keyframe

纯粹使用CSS3关键帧（无JS），带有动画延迟的元素在淡入之前短暂出现

因此，我想在标题中有一些元素，这些元素可以使用CSS3密钥帧在"页面加载"上淡入页面加载.尽管动画本身可以正常工作，但延迟的元素在动画之前在最终状态下出现了一秒钟.我目前不知道任何JavaScript，所以我希望在HTML/CSS中对此有一个解决方案.可以做吗? * { font-family: 'Varela', sans-serif; } body { padding: 0; margin: 0; background-color: rgb(90, 120, 240); } a { text-decoration: none; color: inherit; font-size: inherit; } /*************************** HEADER ***************************/ .header-banner { display: flex;

10 2023-04-12 编程技术问答社区 css css-animations keyframe

悬停时反转关键帧动画

这是一个演示: 我在.circle div的hover上有一个keyframe动画.悬停在它上时，它正常工作. @include keyframes(bounce-bulge) { 0% { transform: scale(1); } 20% { transform: scale(.75); } 80% { transform: scale(1.75); } 100% { transform: scale(1.5); } } .circle { transition: all 300ms ease; &:hover { @include animation(bounce-bulge 500ms forwards); } } 我想在您停止徘徊在元素上时，要扭转keyframe的效果. 仅使用CSS? 这可能是可能的解决方案请看我的示例，如果您想要的是正确的(有人会发明

10 2023-04-12 编程技术问答社区 css sass css-animations keyframe compass

关键帧CSS动画覆盖悬停过渡

恐怕有类似的问题，但我没有找到具体的解决方案，所以我创建了一个小提琴: TEXT CSS: .category_item { position: absolute; background-color: #999; top: 100px; left: 50px; width: 200px; height: 200px; /* seems to be overwriten by animation keyframes */ -webkit-transition: -webkit-transform 0.215s ease-in-out; transition: transform 0.215

32 2023-04-12 编程技术问答社区 css hover css-animations keyframe

当宽度为100%时，从中间开始扩展/动画化一个div

我有一个带边框的div，我使用密钥帧扩展了onload，但我希望它从中心而不是从左到右扩展. http://andylilien.com/index2015.html CSS: .navback { position:absolute; bottom:0px; padding-bottom:-8px; width:100%; height:17px; background-color:#FFF; border-top: 1px solid #d0d0d0; z-index:999; } @-webkit-keyframes expandline{ 0%{width:0%;} 50%{width:50%;} 100%{width:100%;} } .navback{ -webkit-animation:expandline 2s; } 解决方案按照您的操作调整高度和宽度，但是transform元素通过适当放置元素. 另外，如果您使用的是通用的宽松功能

20 2023-04-12 编程技术问答社区 css keyframe

有没有办法从ReactJS向CSS样式表传递一个变量？

我正在编写一个带有可变数量组件的滚动式票据，因此我需要它根据组件的数量来更改translate3d移动的距离.我能想到的唯一方法是以某种方式将其从JSX文件传递给它，但是我找不到这样做的方法.有什么方法可以通过CSS变量或其他方法来完成我想要的事情? 解决方案有几个/a>库，使您可以在组件动画中添加keyframes.当您在JavaScript中编写样式时，您可以直接使用组件道具/状态或其他常数来创建组件样式. 以下3个库具有关键框架支持(我个人正在使用第一个): 样式的components( github ) ) ) import styled, { keyframes } from 'styled-components'; const rotate360 = keyframes` from { transform: rotate(0deg); } to { transform: rotate(360deg); } `; const Rotate

0 2023-04-12 编程技术问答社区 javascript css reactjs css-animations keyframe

css幻灯片的背景必须要加载

我用KeyFrame制作了一个简单的CSS幻灯片，我将图片调整到了大约60kb(它们看起来很糟糕，但我正在测试它是否可以工作)，令我惊讶的是，它不起作用，图片仍然必须加载. 这是我的幻灯片的CSS，不确定它是否可以提供帮助，但我还是会把它放在上面. body { background-size: cover; animation: div 20s infinite; height: 100vh; margin: 0; background-position: center; background-repeat: no-repeat; background-blend-mode: darken; } html { background: rgba(255, 255, 255, 0.53); } @keyframes div { 0% { background-image: url("test.jpg"); } 20%

8 2023-04-12 编程技术问答社区 html css keyframe

如何防止CSS关键帧动画在页面加载时运行？

我有一个div，其中我对内容进行了动画: #container { position: relative; width: 100px; height: 100px; border-style: inset; } #content { visibility: hidden; -webkit-animation: animDown 1s ease; position: absolute; top: 100px; width: 100%; height: 100%; background-color: lightgreen; } #container:hover #content { -webkit-animation: animUp 1s ease; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes

20 2023-04-12 编程技术问答社区 css dom css-animations keyframe

首页
<
1
2
3
>
尾页