CSS 从右到左 @keyframes transform:-100% to transform none
我面临难以找到导致问题的困难.感谢您的帮助.在网站中,我将HTML文本方向右至左设置,因为网站上的阿拉伯语网站.并且有CSS动画都正常运行.除了以下条件: 当HTML文本方向右至左时,我在移动设备上浏览该网站.或使用Google Chrome中的设备切换选项. 当页面加载时,它将加载在DIV上,该DIV设置为-100%,而不是在内容和DIV上加载-100%的DIV到页面中的MID.这使整个网页都来自正确的幻想.我不知道如何解决我正在考虑的视口的移动设备,但找不到解决方案. 这是网页的代码 RTL TEST SITE .animated { animation-duration: 1s; animation-fill-mode: both; }
0 2024-02-26
编程技术问答社区
如何通过CSS覆盖在重复的无限动画之间添加延迟
我从 这是一个现场示例动画图像如何保持重复的方式很快. 我希望能够应用class =" delay4",例如,如果我希望在动画发生后有4s延迟.然后在那4s之后,动画将重复. 我可以轻松地将CSS覆盖到我的主题中,因此这是最好的选择,因为我使用的是CDN. 奖金!如果我还可以为动画指定持续时间,那将是理想的选择.即,某些动画发生得如此之快,我认为如果它们放慢了一点,它们可能看起来更好. 解决方案 我对此有两个解决方案,纯粹是基于自定义的CSS,另一个是Animate.css +基于JQuery. CSS解决方案: 在 img { animation: shake 5s; animation-iteration-count: infinite; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 2% { transform:
0 2024-02-26
编程技术问答社区
如何在css动画中循环播放一组动画,即每行跳动一次?
我正在对一组DIV进行弹跳效果,使每个弹跳都使用动画延迟进行一次反弹.我想在最后一行动画完成后立即重复该序列,请在此问题上帮助我.找到下面的代码.我所做的是计算了动画延迟的总数,并将其设置为动画持续时间,但是迭代似乎是在很大程度上进行的.如何确保最后一行动画完成后立即重复迭代? //style.css .detail-container .row { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-duration: 35s; animation-duration: 35s; -webkit-animation-fill-mod
0 2024-02-26
编程技术问答社区
基于滚动的动画在定义区域外工作
所以我对JS非常新.我正在尝试将卷轴动画仅在指定区域工作仅在定义的帧中工作. 有什么想法我如何解决这个问题? 这就是它的外观(这是钢铁侠头盔,赦免未完成的站点):这是我正在使用的代码: 在 $(document).ready(function() { //variable for the 'stroke-dashoffset' unit var $dashOffset = $(".path").css("stroke-dashoffset"); //on a scroll event - execute function $(window).scroll(function() { //calculate how far down the page the user is var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(w
2 2024-02-26
编程技术问答社区
Css3关键帧循环滑块?
人们怎么了..我一直在这个奇妙的CSS3关键框架上训练自己. 我已经看过几种关于用100%CSS制造的滑块的方法,但我正在寻找不同的东西. 我要做的是一个滑块,该滑块同时移动其所有图片(用户都可以看到它们时,当他们移动时,当第一张图片离开可见度时,例如(左侧) ,它应该来自右边,而其他图片也相同.直到地球停止:d. 我想做的是可以理解的吗?但是我不知道该怎么做. 请给一只手! 感谢您的帮助. 这是一些代码:
2 2024-02-26
编程技术问答社区
停止CSS3关键帧动画
我已经为 动画了一个div div{ animation-name:moveit; animation-duration:2s; } @keyframes moveit{ 0%{ top:0; } 100%{ top:400px; } } 此动画从top 0px中移动到2sec 2sec. 现在问题是动画结束时,它返回到top=0 ...我希望动画结束时,它应该保留在top=400px>; 上. 它没有重复,而是回到其原始位置,但我希望它保持在100% 解决方案 要坚持动画的末端状态,您可以为您的Div元素提供初始属性. div { top: 400px; animation-name: moveit; animation-duration: 2s; } @keyframes moveit { 0% { top: 0px; } 100% { top: 400px; } }
0 2024-02-26
编程技术问答社区
CSS动画:只有在我停止盘旋之后,返回DIV到其原始位置
我希望我的div停止徘徊后返回其原始位置.但是回报始于我什至开始在运行代码后悬停在DIV上并立即悬停. 我只需要在停止徘徊后才执行反向动画. 在 Page Title div { width: 100px; height: 100px; padding: 2px; background-color: lightblue; color: White; font-size: 40px; text-align: center; vertical-align: middle; display: table-cell; } div:hover { animation: moveDiv 10s linear infinite; animation-play
0 2024-02-26
编程技术问答社区
悬停上的CSS关键帧动画--随鼠标移动重设动画
请参阅下面的代码,以获取悬停的简单键帧动画. 在 .behind { width: 200px; height: 200px; background: red; position: absolute; } .infront { width: 200px; height: 200px; background: blue; position: absolute; } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; transform: translate3d(-100%, 0, 0); } } .infront:hover { animation: fadeOutLeft 2s; }
0 2024-02-26
编程技术问答社区
从中心出现的关键帧动画
我正在创建一个密钥帧过渡序列.我希望圆圈出现两秒钟,然后恒星出现其他两秒钟.我遇到了几个问题. 为什么我的星星在动画末端变成矩形? 我如何让恒星从中心出现,而不是对角线上的左上角滑动? 为什么我的红色圆圈消失了一秒钟,然后恒星出现? 有人知道我做错了什么吗? body { background-color: #F5F5F5; color: #555; font-size: 1.1em; font-family: 'Lato', sans-serif; } .star { background-color: #f1c40f; color: white; width: 250px; height: 250px; margin: 30px auto; text-align: justify; -webkit-animation-name: example; /* Chrome, Safari,
0 2024-02-26
编程技术问答社区
如何使用变换而不挤压内容来动画高度
在我的项目中,当用户单击按钮时,我一直在使用jQuery slideUp()在200项列表中滑动一个元素.但是,众所周知,动画CSS高度需要一个反流,使动画生动.该动画是应用程序不可或缺的一部分,我愿意进行大量工作以使其正常工作并顺利进行. 我已经决定CSS transform是使其正常工作的方式,因为它在GPU上进行了处理,并且在某些现代浏览器上,它甚至是主线程,而沉重的JS工作也不会影响转换. (我确实有沉重的JS工作). 我正在寻找使用CSS transition: transform的巧妙解决方案来复制jQuery slideUp,该解决方案只是为height属性而动画.以下是我的尝试,但似乎scale和translate不像预期的那样同步. 在 $("button").on("click", function() { $(".collapsible").addClass("collapsed") setTimeout(function() {
0 2024-02-26
编程技术问答社区
动画完成后Animate.css动画消失了
我正在尝试构建一个菜单,该菜单每个列表项目都有一系列动画.它有效,但是在动画之后,项目再次消失.它的接缝类似于未使用.动画的可见属性.您可以给我解决此问题的任何指示吗? Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World
0 2024-02-26
编程技术问答社区
将内嵌式风格动画化,回到初始状态
我已经实施了一个CSS解决方案,以动画使用我的标签动画是双向的(在负载和重置上),但是进度栏本身立即转到零 div的宽度像这样设置为内联: 和on Load动画很简单 .progress-black { background: black; animation: progress-bar .5s linear; z-index: 2; } @keyframes progress-bar { 0% { width: 0; } } 似乎@keyframe动画需要一个100%的值,这是动态设置的,因此不确定如何在CSS中表达该值. 我的特定应用程序具有单击"重置"的能力.有没有办法使动画回到0? 解决方案 您的代码中几乎没有问题,并且有两个解决方案: 第一个解决方案: - 更好一个 在您
0 2024-02-26
编程技术问答社区
为什么我的CSS变量不影响关键帧动画?
我正在尝试使用JavaScript来更改KeyFrames动画的开始和最终度值. in:root在我的CSS文件中,我为六个divs中的每一个创建一个开始和结束变量,并为" 0deg"分配初始值.然后,在我的JavaScript文件中,我每3秒更新每个变量.从理论上讲,这应该意味着每个Div以90度增量随机转动. 但是,这不是发生的事情,我撞到了墙.有趣的是,当我使用getComputedStyle将CSS旋转变量的值打印到控制台时,它们正正确地反映了JavaScript创建的值.您可以在这里看到控制台记录各种数字,这些数字符合我的" rotate0a"和" rotate0b"的公式 - 左上角div的启动和最终值.然而,该div根据我设置的变量连续旋转:root. CSS变换不尊重新变量值.任何帮助将不胜感激.谢谢! 代码下面的代码和codepen版本: let min = 0; let max = 4; let x; let rotVar; let ro
0 2024-02-26
编程技术问答社区
如何检测CSS3动画或网页动画API的变化?
如何检测CSS3动画或Web动画(Element.animate)的更改?? (对不起,我的英语不好!这是我在Stackoverflow中的第一个问题) 我知道MutationObserver,它仅在更改内联样式或使用requestAnimationFrame时响应(因为我使用它更改了内联样式).但是,如果我使用CSS3动画或Web动画,则突变处理器不会响应,因为它们不会更改内联样式. 请参阅此...这里有两个Divs ... Div1,Div2.当Div2的位置改变时,DIV1的位置将改变.但是,只有我以前说的是requestAnimationFrame,才会发生. 我的问题是,我该如何为CSS3动画和Web动画(element.Simate)这样做? const div1 = document.getElementById('div1'); const div2 = document.getElementById('div2'); /*****
0 2024-02-26
编程技术问答社区
IE/Edge-CSS3转场在导航时启动
我在页面上的几个元素上分配了宽度和高度的过渡,包括顶部导航栏和元素.当用户调整页面大小时,元素会动画以更改其宽度/高度等. 这可以正常工作,除非导航到新页面.随着页面的加载,元素从其最大分配的宽度到其标准宽度的动画.这不是从max-width到width的动画,而是类似以下内容: nav { height: 25px; transition: all 0.2s ease-in-out; } @media all and (max-height: 200px) { nav { height: 50px; } } 在这个真实示例中,当页面加载时,Navbar的高度为50px,然后将其动画为25px.正如CSS所建议的那样,应该立即为25px. 不需要的动画似乎是在导航而不是加载上发射.加载后,按F5在页面上不会显示动画,并且所有内容都按预期显示.导航到网站中的新页面会导致例如从50px到25px动画的Navba
0 2024-02-26
编程技术问答社区
CSS3动画+@keyframe运行到最后
我找不到播放动画的方法,直到元素为:悬停. 当我:悬停时,动画重置 - 但我希望它继续到结束. jsfiddle .picture:hover { -webkit-animation:swing 1s ease-in-out; } @-webkit-keyframes swing { [...] } 解决方案 可能不是一个完整的解决方案,而是将以下内容添加到您的图片类中: -webkit-animation:swing 3600ms ease-in-out 6000s; -webkit-transform-origin:top; jsfiddle:该解决方案不再在现代浏览器中起作用.请参阅 csss3动画上:强迫整个动画 其他解决方案 我确实喜欢这个 http://jsfiddle.net/z5aq7/ 而不是悬停,我只是
0 2024-02-26
编程技术问答社区
用于代码编辑器动画的网络动画库
stripe.com和vercel.com在其登录页面上有一个非常酷的代码编辑器动画,当我检查它时,它将被编译为HTML. 使用哪些JavaScript库来制作这些类型的本机Web动画?任何NPM软件包要考虑? 解决方案 同位素是JS动画的好库. 我以为在同位素JS库中写东西会很难吗? 在这里,我提出等轴测图. 这是一个使用jQuery和Bootstrap 5.x.x的小类.对于CSS. 请记住,将下面的等距类包括在头部或将其放入单独的.js中,然后将其包含在HTML文件的头部 的头部. class IsoMetric { // 1: ZoomOutMoveInAndZoomIn , 2: FadeOffAppearAndFadeIn, 3: ImplodeExplode, 4: Rotation constructor(item_container, item_identifier, animationOption) { this.animationOptio
0 2024-02-26
编程技术问答社区
如何设置一个CSS动画的当前帧(或类似)?
我有一个CSS密钥帧动画本身是很普通的.但是,我希望能够强迫动画在特定的框架上. anim.setProgress(0.13)之类的东西,这将使动画保持在13%. 我该怎么做? 请注意,我不仅要在任意点开始动画.我希望能够中断它,并说"回到32%"之类的东西,无论动画距离多远. 解决方案 给动画一个负animation-delay值.对于运行10秒的动画,将以-1.3s>. 文档 如果"动画 - 列表"的值是负时间偏移,则动画将在应用时执行,但似乎已在指定的偏移量开始执行.也就是说,动画将在其游戏周期中开始部分开始.在动画暗示启动值和负面的"动画 - 列表"的情况下,起始值是从应用动画的那一刻获取的. 示例 在 div.loading { animation: loading 10s linear 1; animation-play-state: paused; animation-delay: -1.3s; /*start at 13
0 2024-02-26
编程技术问答社区
CSS动画淡入 pause.... 淡出
我正在尝试获得一些(将是图像)块,以在暂停中褪色几秒钟,然后淡出.... 我已经知道了,但是它似乎并不想保持褪色,我不确定我出错了哪里. 淡出后,然后再次出现. 我有一个小提琴,这表明它非常基本. /* Defines the animation keyframes */ @-webkit-keyframes fadein { 0% { opacity: 0; } 72% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadein { 0% { opacity: 0; } 72% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadein { 0% { opacity: 0; } 72% {
0 2024-02-26
编程技术问答社区
返回时旋转的CSS动画
我正在尝试使用此箭头创建动画,该箭头将上下移动,并在0%和100%上旋转或更改其方向.但是到目前为止,我得到的是,箭头将在100%上旋转SEC,然后返回到以前的方向.因此,基本上我要做的是,箭头应该在上向上向上 和降低在返回或上向下.我可以只使用CSS动画做到这一点吗? on 向上箭头应该有这个方向 我也想用rotate在100%和rotate上进行旋转动画. 解决方案 只需使用以下代码更改动画 @keyframes bounceAndRotate { 0% { transform:rotate(0deg);top:-20px; } 25% { transform:rotate(00deg);top:-10px; } 50% { transform:rotate(0deg);top:0px; } 75% { transform:rotate(180deg);top:10px; } 100% {
0 2024-02-26
编程技术问答社区