css-animations 第3页 - IT屋-程序员软件开发技术分享社区

使用 CSS3 旋转背景图像

我有一个背景图像，其中有一个指向右侧的箭头.当用户单击按钮时，选定状态会将箭头更改为向下(在我的图像精灵中使用不同的背景位置). 是否有使用 CSS3 对其进行动画处理的方法，所以一旦单击按钮并 jQuery 为其分配一个“选定"类，它将在动画中从右到下旋转(仅 90 度)?(最好使用带有指向右侧的箭头的单个图像/位置) 我不确定是否需要使用变换或关键动画帧. 解决方案你可以 ..

发布时间：2022-01-16 14:29:18 css rotation background-image css-animations 前端开发

如果选择器不再匹配，如何将 CSS3 动画运行到最后?

我一直认为 CSS3 动画(不同于 CSS3 过渡)一旦开始，总是完成工作，无论选择器是否不再匹配激活它们的元素. 我今天意识到我可能错了. 在以下示例中，动画由 :focus 和 :active 伪类触发.关注第一个文本字段: 如果你慢慢按下tab按钮，你会看到动画正确开始和结束；如果你快速按下tab按钮，你会看到一旦新元素获得焦点，旧元素的动画立即结束并消失. @- ..

发布时间：2022-01-09 23:58:11 html css css-selectors css-animations 前端开发

我在一个页面上有一堆长时间运行的 CSS 动画.我想在用户切换到另一个选项卡时暂停它们，并在用户再次返回原始选项卡时恢复它们.为简单起见，我现在的目标不是跨浏览器解决方案.让它在 Chrome 中运行就足够了. document.addEventListener("visibilitychange", function() {如果(document.hidden){document.quer ..

发布时间：2022-01-09 20:45:20 javascript css animation tabs css-animations 前端开发

是否可以为 Flexbox 插入动画制作动画?删除?

当我从 flexbox 中移除一个项目时，剩余的项目会立即“对齐"到它们的新位置而不是动画. 从概念上讲，由于项目正在改变它们的位置，我希望转换能够应用. 我已经为所有涉及的元素(flexbox 和子元素)设置了 transition 属性有什么方法可以对 flexbox 进行动画编辑(添加和删除)?这对我来说实际上是一个亮点，也是 flexbox 的一个缺失部分. 解决 ..

发布时间：2021-12-31 13:04:08 css css-transitions css-animations flexbox 前端开发

Transition flex-grow 在 flexbox 中的项目

是否可以转换 flexbox 中的项目?当您单击时，我希望所有项目都折叠起来，除了被单击的项目.单击的那个应该使用容器中的所有可用空间. //只工作一次！$(".item").click(function() {$(".item").not(this).each(function() {$(this).addClass("折叠");});}); html, body {宽度:100%；高度 ..

发布时间：2021-12-31 12:47:56 javascript jquery css css-animations flexbox 前端开发

如何具有平滑效果的 window.scrollTo()

我可以使用以下方法滚动到 200px btn.addEventListener("点击", function(){window.scrollTo(0,200);}) 但我想要平滑的滚动效果.我该怎么做? 解决方案 2018 更新现在你可以只使用 window.scrollTo({ top: 0, behavior: 'smooth' }) 来让页面滚动得更流畅. cons ..

发布时间：2021-12-29 10:48:39 javascript css scroll css-animations css-transitions 前端开发

当内容滚动到视图中时激活 CSS3 动画

我有一个使用 CSS3 制作动画的条形图，当前动画在页面加载时激活. 我遇到的问题是，由于前面有很多内容，给定的条形图放置在屏幕外，因此当用户向下滚动到它时，动画已经完成. 我一直在寻找通过 CSS3 或 jQuery 仅在查看者看到图表时激活条形图上的 CSS3 动画的方法. 这里有很多内容，它填满了屏幕的高度，然后一些动画栏聊天在这里如果您在页面加载后 ..

发布时间：2021-12-29 10:36:09 jquery html css scroll css-animations 前端开发

如何将 CSS AnimationEnd 事件处理程序添加到 GWT 小部件?

我希望我的 GWT 小部件在 CSS 动画结束时收到通知. 在普通的 HTML/Javascript 中，这很容易通过注册一个事件处理程序来完成: elem.addEventListener("webkitAnimationEnd", function(){//做一点事}，错误的);//为 Mozilla 等添加更多内容如何在 GWT 中执行此操作? 这种类型的事件对于 GW ..

发布时间：2021-12-28 22:18:45 dom gwt dom-events css-animations gwt-2.4 其他开发

CSS 从无显示到显示块的过渡，反之亦然

我知道这个问题在 SO 中可能被问过数百万次，但我已经尝试了大部分解决方案，我只是不知道为什么它对我不起作用. 所以我有一个带有 display 的下拉菜单，最初针对 none.当我点击它时，它显示了很好的过渡.(到现在为止还挺好).但是当我再次单击它以隐藏下拉菜单时，它会立即隐藏，但我不想要那样.我想用分配给显示的类似过渡来隐藏.这是我的 CSS 代码: .dropdown-menu ..

发布时间：2021-12-28 19:23:02 html css drop-down-menu css-transitions css-animations 前端开发

如何在两个 Bootstrap 3 选项卡之间制作幻灯片动画?

我想弄清楚如何在两个 Bootstrap 3 选项卡之间向左、向右、向上、向下滑动. 我在网上搜索过，令人惊讶的是没有找到任何东西. 最接近的我发现的是 THIS 在 Bootstrap github 上.但是，它适用于 Bootstrap 2.0.2，不再适用于 Bootstrap 3. 有人知道如何在两个 Bootstrap 3 选项卡之间向左、向右、向上滑动(任意或全部)吗? ..

发布时间：2021-12-28 15:08:07 jquery twitter-bootstrap tabs twitter-bootstrap-3 css-animations 其他开发

关键帧中的背景图像在 Firefox 或 Internet Explorer 中不显示

我的网站上有几个动画，我刚刚发现它们甚至没有出现在 Firefox 或 Internet Explorer 中.我在关键帧中有 background-image.我这样做是因为我在动画中有不同百分比的不同图像. 为什么 background-image 不显示在 Firefox 和 Internet Explorer 的关键帧内，有什么方法可以实现这一点? 解决方案根据规范, b ..

发布时间：2021-12-18 12:08:07 css internet-explorer firefox css-animations 前端开发

如何将动画渐变添加到 svg 路径?

我有一个像这样的心形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 ..

发布时间：2021-12-17 18:13:57 css svg css-animations linear-gradients 前端开发

加水动画

我正在尝试制作一个擦拭动画，使圆圈看起来它在装满水.我遇到了两个错误，甚至无法解决第三个错误: 它填错了填充后会重置为空(黑色) * 目前，我正在使用标签，但我想将此效果移动到 body { background-image: } 并且需要一些指导关于如何做到这一点. 到目前为止我尝试过的: #banner {宽度:300px；高度:300px；位置:相对；}#banne ..

发布时间：2021-12-17 18:10:12 css svg css-animations css-shapes 前端开发

使用 CSS 变换后的模糊文本: scale();在 Chrome 中

似乎 Google Chrome 最近有一个更新，在执行 transform: scale() 后会导致文本模糊.具体来说，我正在这样做: @-webkit-keyframesounceIn {0% {不透明度:0；-webkit-transform: scale(.3);}50%{不透明度:1；-webkit-transform: scale(1.05);}70%{-webkit-transf ..

发布时间：2021-12-10 14:46:13 google-chrome css webkit transform css-animations 前端开发

为什么 CSS 关键帧动画在具有作用域样式的 Vue 组件中被破坏?

我正在尝试在 Vue 中实现一个 CSS 类型指示器.没有Vue，它看起来像这样: .typing-indicator {背景颜色:#E6E7ED；宽度:自动；边框半径:50px；填充:20px；显示:表；边距:0 自动；位置:相对；-webkit-animation:2s 凸起无限缓出；动画:2s 凸起无限缓出；}.typing-indicator:before, .typing-indi ..

发布时间：2021-12-08 22:04:43 javascript css vue.js vuejs2 css-animations 前端开发

SVG.使用 css 反转图像.将图像保持在同一位置

这是一个代码笔示例 https://codepen.io/yury-leonov/pen/rZxxQE 示例代码: $(".example").on("click", function(e){$(e.target).toggleClass("reverse");}) .reverse{变换:scaleX(-1)；} ..

发布时间：2021-12-07 11:08:30 image css svg css-animations 前端开发

在最后一帧停止 CSS3 动画

我有一个由 4 部分组成的 CSS3 动画在点击时播放 - 但动画的最后一部分是为了将其从屏幕上移除. 但是，一旦播放完毕，它总是会恢复到原来的状态.任何人都知道我如何在它的最后一个 css 帧 (100%) 停止它，或者如何在它播放后摆脱它所在的整个 div. @keyframes colorchange {0% { 变换:缩放(1.0)旋转(0度)；}50% { 变换:旋转(340 度 ..

发布时间：2021-12-01 16:27:40 css css-animations 前端开发

在 CSS3 动画结束时保持最终状态

我在 CSS 中设置为 opacity: 0; 的一些元素上运行动画.动画类应用于点击，并使用关键帧将不透明度从 0 更改为 1(除其他外). 不幸的是，当动画结束时，元素回到 opacity: 0(在 Firefox 和 Chrome 中).我的自然想法是动画元素保持最终状态，覆盖它们的原始属性.这不是真的吗?如果没有，我怎样才能让元素这样做? 代码(不包括前缀版本): @keyf ..

发布时间：2021-12-01 16:22:27 css css-animations 前端开发

使用带有渐变背景的 CSS3 过渡

我正在尝试使用 css 在缩略图上进行悬停过渡，以便在悬停时背景渐变淡入.过渡不起作用，但如果我只是将其更改为 rgba()值，它工作正常.不支持渐变吗?我也尝试使用图像，它也不会转换图像. 我知道这是可能的，因为在另一篇文章中有人做到了，但我不知道具体是如何做到的.任何帮助>这里有一些 CSS 可以使用: #container div a {-webkit-transition:背景 0 ..

发布时间：2021-12-01 16:10:01 css css-animations css-transitions gradient css-gradients 前端开发

CSS 3D 动画，怎么样?

我想在 3D 空间中制作动画.我知道这可以通过 CSS 和 HTML5 实现，但我找不到适合实际使用的好教程！我以这个网站为例.您可以一直选择文本等.有人可以给出一个非常容易理解的小例子，这是如何工作的吗?我看到了源代码，但我真的不明白...... 这是 CSS3 还是 HTML5 或两者兼而有之? 我需要多少 JavaScript? 哪些浏览器支持这个? 解决方案 ..

发布时间：2021-11-25 01:00:44 javascript html css 3d css-animations 前端开发

css-animations相关内容