css-animations相关内容

LESS CSS 将 mixin 作为参数传递给另一个 mixin

有没有办法将一个 mixin 或样式的声明作为输入参数传递给另一个 mixin? 让我们看一个动画关键帧的例子.以下是我们如何在纯 CSS 中定义关键帧: @-moz-keyframes some-name{来自 { 颜色:红色；}{ 颜色:蓝色；}}@-webkit-keyframes some-name{来自 { 颜色:红色；}{ 颜色:蓝色；}}@keyframes 一些名字{来自 ..
发布时间：2021-11-17 05:10:24 前端开发

Firefox CSS 动画平滑(子像素平滑)

我正在创建一个 CSS 关键帧动画，让元素看起来好像是随意/缓慢地漂浮着一点.它嵌套在parents中，一个使用translateX()缓慢左右移动，一个使用translateY()缓慢独立上下移动. Chrome 和 Safari 完美地呈现了这一点，使其具有逐渐摇摆的运动.它平滑动画(也许使用子像素平滑?)，使一切看起来非常平滑.然而，Firefox 会逐个像素地对其进行动画处理，因此您 ..
发布时间：2021-11-10 05:53:11 前端开发

CSS3 动画在 IE11 中不起作用，但在其他浏览器中起作用

我在按钮上创建了一个 CSS3 动画.目前，除了 IE 之外，它在任何地方都可以完美运行.我知道它在较旧的 IE 版本中无法正常工作，但我至少希望它可以在 IE11 中工作. 我创建了一个小提琴来演示 Fiddle 我在 :before 和 :after 上调用动画 动画:1000ms缓动0s正常无无限运行脉冲长； 如果您在 Firefox 或 Chrome 中打开 fiddle， ..
发布时间：2021-11-10 05:52:42 前端开发

如何通过 CSS3 动画淡入背景图像

我正在制作一个菜单，每个项目都有一个文本，如 item1、item2 等.悬停时背景颜色会发生变化，文本变得透明，背景图像被替换.我使用此代码来缓入和缓出样式.但它只适用于背景颜色，而不适用于图像. #nav li:hover {颜色:透明！重要；文字阴影:无；背景颜色:rgba(255, 0, 0, .5);-webkit-transition:全 1s 缓入；-moz-transition: ..
发布时间：2021-11-10 05:48:33 前端开发

React - 动画安装和卸载单个组件

这么简单的事情应该很容易完成，但我对它的复杂程度感到困惑. 我想做的就是为安装和安装动画制作动画.卸载 React 组件，就是这样.以下是我到目前为止所尝试的以及为什么每个解决方案都不起作用的原因: ReactCSSTransitionGroup - 我根本没有使用 CSS 类，它都是 JS 样式，所以这行不通. ReactTransitionGroup - 这个较低级别的 API ..
发布时间：2021-11-10 05:42:36 其他开发

Safari 在运行无关动画时更改字体粗细

我在我的页面上使用了 css 动画，而 Safari 似乎在动画运行时更改了页面上其他地方不相关的字体粗细.知道为什么会这样吗?所有其他浏览器都可以正常工作，包括像 Chrome 这样的 webkit 浏览器. 我在此处的视频中详细介绍了该错误 - http://www.screenr.com/gZN8 该网站也在这里 - http://airport-r7.appspot.com/ ..
发布时间：2021-11-10 05:38:58 前端开发

已弃用的 SMIL SVG 动画替换为 CSS 或 Web 动画效果(悬停、单击)

根据本主题: Firefox 38-40 SMIL 问题 - 速度非常慢(在 22.09.15 的 FF 版本 41 中已解决) 和这个话题: 意图弃用:SMIL SVG 标签“animateTransform"效果不佳.用 CSS 或 CSS 过渡替换 SMIL(动画标签)会很好. 控制台警告:请改用 CSS 动画或 Web 动画)，这将在最新版本的 Firefox 和 ..
发布时间：2021-11-10 05:29:43 前端开发

如何使用 width: auto 转换内容的宽度?

我有一个元素，当它的内容改变时，我想为其宽度设置动画.它有 width: auto，并且永远不会改变.我已经看到了这个技巧，但那是为了在两个值之间转换并且一个值已经设置.我根本不操纵值，只操纵内容，并且我希望元素的大小随动画而变化.这在 CSS 中完全可行吗? 这是我的代码的简化版本: .myspan {背景色:#ddd;}.myspan:hover::after {内容:“\00a0 ..
发布时间：2021-11-10 05:27:20 前端开发

在 Firefox 中转换 SVG 的原点

我是 SVG 动画的新手我遇到了一个似乎只发生在 Firefox 中的问题.我在这里创建了一个动画 - http://codepen.io/iamali/pen/txvpo - 天空场景.太阳应该旋转&淡入淡出出来. 它在 Chrome 中运行良好，但出于某种原因，它似乎忽略了 Firefox 中的 transform-origin 值，而太阳就消失了.有没有人知道 Firefox 中有这样 ..
发布时间：2021-11-10 05:27:05 其他开发

在没有 ngAnimate 的情况下使用 ng-show 制作动画

我想为我的 ng-show 制作一个擦除动画.基本上，我想实现这个简单的动画，如 plunkr 所示. 我知道 ngShow 从 angular 1.3 开始就有了 ng-animate 的钩子.不过，情况有点复杂.我有一个使用 angular UI Carousel bootstrap 扩展的轮播.引导程序在 Chrome 中存在错误，因此需要为 carousel 标记下的所有元素禁用 n ..
发布时间：2021-11-10 04:13:31 前端开发

带有 AngularJS 的 CSS3 动画在 Firefox 中无法正确滑动

我制作了一个连接到 ng-repeat 的 CSS3 动画，然后用 Bootstrap3 显示一个 inline-list，我限制了列表中最多 3 个显示和我有一些小问题主要出现在 Firefox 中(信不信由你，IE11 没有问题，哇，我很惊讶). 我有 2 个按钮(上一个/下一个)，当我单击 Next 按钮时，从左到右滑动的动画开始完成他的工作，但是在 Firefox 中多次单击时，似乎动画 ..
发布时间：2021-11-10 00:04:04 前端开发