css-animations相关内容
我有一个背景图像,其中有一个指向右侧的箭头.当用户单击按钮时,选定状态会将箭头更改为向下(在我的图像精灵中使用不同的背景位置). 是否有使用 CSS3 对其进行动画处理的方法,所以一旦单击按钮并 jQuery 为其分配一个“选定"类,它将在动画中从右到下旋转(仅 90 度)?(最好使用带有指向右侧的箭头的单个图像/位置) 我不确定是否需要使用变换或关键动画帧. 解决方案 你可以
..
我一直认为 CSS3 动画(不同于 CSS3 过渡)一旦开始,总是完成工作,无论选择器是否不再匹配激活它们的元素. 我今天意识到我可能错了. 在以下示例中,动画由 :focus 和 :active 伪类触发.关注第一个文本字段: 如果你慢慢按下tab按钮,你会看到动画正确开始和结束; 如果你快速按下tab按钮,你会看到一旦新元素获得焦点,旧元素的动画立即结束并消失. @-
..
我在一个页面上有一堆长时间运行的 CSS 动画.我想在用户切换到另一个选项卡时暂停它们,并在用户再次返回原始选项卡时恢复它们.为简单起见,我现在的目标不是跨浏览器解决方案.让它在 Chrome 中运行就足够了. document.addEventListener("visibilitychange", function() {如果(document.hidden){document.quer
..
当我从 flexbox 中移除一个项目时,剩余的项目会立即“对齐"到它们的新位置而不是动画. 从概念上讲,由于项目正在改变它们的位置,我希望转换能够应用. 我已经为所有涉及的元素(flexbox 和子元素)设置了 transition 属性 有什么方法可以对 flexbox 进行动画编辑(添加和删除)?这对我来说实际上是一个亮点,也是 flexbox 的一个缺失部分. 解决
..
是否可以转换 flexbox 中的项目?当您单击时,我希望所有项目都折叠起来,除了被单击的项目.单击的那个应该使用容器中的所有可用空间. //只工作一次!$(".item").click(function() {$(".item").not(this).each(function() {$(this).addClass("折叠");});}); html, body {宽度:100%;高度
..
我可以使用以下方法滚动到 200px btn.addEventListener("点击", function(){window.scrollTo(0,200);}) 但我想要平滑的滚动效果.我该怎么做? 解决方案 2018 更新 现在你可以只使用 window.scrollTo({ top: 0, behavior: 'smooth' }) 来让页面滚动得更流畅. cons
..
我有一个使用 CSS3 制作动画的条形图,当前动画在页面加载时激活. 我遇到的问题是,由于前面有很多内容,给定的条形图放置在屏幕外,因此当用户向下滚动到它时,动画已经完成. 我一直在寻找通过 CSS3 或 jQuery 仅在查看者看到图表时激活条形图上的 CSS3 动画的方法. 这里有很多内容,它填满了屏幕的高度,然后一些
动画栏聊天在这里 如果您在页面加载后
..
我希望我的 GWT 小部件在 CSS 动画 结束时收到通知. 在普通的 HTML/Javascript 中,这很容易通过注册一个事件处理程序来完成: elem.addEventListener("webkitAnimationEnd", function(){//做一点事}, 错误的);//为 Mozilla 等添加更多内容 如何在 GWT 中执行此操作? 这种类型的事件对于 GW
..
我知道这个问题在 SO 中可能被问过数百万次,但我已经尝试了大部分解决方案,我只是不知道为什么它对我不起作用. 所以我有一个带有 display 的下拉菜单,最初针对 none.当我点击它时,它显示了很好的过渡.(到现在为止还挺好).但是当我再次单击它以隐藏下拉菜单时,它会立即隐藏,但我不想要那样.我想用分配给显示的类似过渡来隐藏.这是我的 CSS 代码: .dropdown-menu
..
我想弄清楚如何在两个 Bootstrap 3 选项卡之间向左、向右、向上、向下滑动. 我在网上搜索过,令人惊讶的是没有找到任何东西. 最接近的我发现的是 THIS 在 Bootstrap github 上.但是,它适用于 Bootstrap 2.0.2,不再适用于 Bootstrap 3. 有人知道如何在两个 Bootstrap 3 选项卡之间向左、向右、向上滑动(任意或全部)吗?
..
我的网站上有几个动画,我刚刚发现它们甚至没有出现在 Firefox 或 Internet Explorer 中.我在关键帧中有 background-image.我这样做是因为我在动画中有不同百分比的不同图像. 为什么 background-image 不显示在 Firefox 和 Internet Explorer 的关键帧内,有什么方法可以实现这一点? 解决方案 根据 规范, b
..
我有一个像这样的心形svg路径: <路径的className = “" d =“M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.31760
..
我正在尝试制作一个擦拭动画,使圆圈看起来它在装满水.我遇到了两个错误,甚至无法解决第三个错误: 它填错了 填充后会重置为空(黑色) * 目前,我正在使用 标签,但我想将此效果移动到 body { background-image: } 并且需要一些指导关于如何做到这一点. 到目前为止我尝试过的: #banner {宽度:300px;高度:300px;位置:相对;}#banne
..
似乎 Google Chrome 最近有一个更新,在执行 transform: scale() 后会导致文本模糊.具体来说,我正在这样做: @-webkit-keyframesounceIn {0% {不透明度:0;-webkit-transform: scale(.3);}50%{不透明度:1;-webkit-transform: scale(1.05);}70%{-webkit-transf
..
我正在尝试在 Vue 中实现一个 CSS 类型指示器.没有Vue,它看起来像这样: .typing-indicator {背景颜色:#E6E7ED;宽度:自动;边框半径:50px;填充:20px;显示:表;边距:0 自动;位置:相对;-webkit-animation:2s 凸起无限缓出;动画:2s 凸起无限缓出;}.typing-indicator:before, .typing-indi
..
这是一个代码笔示例 https://codepen.io/yury-leonov/pen/rZxxQE 示例代码: $(".example").on("click", function(e){$(e.target).toggleClass("reverse");}) .reverse{变换:scaleX(-1);}
..
我有一个由 4 部分组成的 CSS3 动画在点击时播放 - 但动画的最后一部分是为了将其从屏幕上移除. 但是,一旦播放完毕,它总是会恢复到原来的状态.任何人都知道我如何在它的最后一个 css 帧 (100%) 停止它,或者如何在它播放后摆脱它所在的整个 div. @keyframes colorchange {0% { 变换:缩放(1.0)旋转(0度);}50% { 变换:旋转(340 度
..
我在 CSS 中设置为 opacity: 0; 的一些元素上运行动画.动画类应用于点击,并使用关键帧将不透明度从 0 更改为 1(除其他外). 不幸的是,当动画结束时,元素回到 opacity: 0(在 Firefox 和 Chrome 中).我的自然想法是动画元素保持最终状态,覆盖它们的原始属性.这不是真的吗?如果没有,我怎样才能让元素这样做? 代码(不包括前缀版本): @keyf
..
我正在尝试使用 css 在缩略图上进行悬停过渡,以便在悬停时背景渐变淡入.过渡不起作用,但如果我只是将其更改为 rgba()值,它工作正常.不支持渐变吗?我也尝试使用图像,它也不会转换图像. 我知道这是可能的,因为在另一篇文章中有人做到了,但我不知道具体是如何做到的.任何帮助>这里有一些 CSS 可以使用: #container div a {-webkit-transition:背景 0
..
我想在 3D 空间中制作动画.我知道这可以通过 CSS 和 HTML5 实现,但我找不到适合实际使用的好教程! 我以这个网站为例.您可以一直选择文本等.有人可以给出一个非常容易理解的小例子,这是如何工作的吗?我看到了源代码,但我真的不明白...... 这是 CSS3 还是 HTML5 或两者兼而有之? 我需要多少 JavaScript? 哪些浏览器支持这个? 解决方案
..