-
1 votesanswersviews
如何在不损失比例的情况下制作视差全屏背景
所以我想制作一个用鼠标移动的背景 . 背景需要比屏幕大15％左右，以使效果更好 . 我没有使用tilable图像 . 我试过使用 background-size:115% ，但问题是图像是水平的，如果浏览器尺寸不够宽，我们可以看到图像的边缘 . 使用 background-size:cover don 't work because I can'为它设置动画，因为没有外部图像 . 使用带有 wi... -
0 votesanswersviews
为什么我的CSS动画在Safari中不起作用
Update I found the answer. 我有一个SVG，我用CSS关键帧动画 . <a class="bolster-banner" href="http://example.com" target="_blank"> <svg width="283" height="... -
0 votesanswersviews
由于关键帧动画，无法更改svg的笔触和填充颜色
我正在尝试编辑svg的填充和描边 . 通常这很简单 . 但是，这个svg使用css关键帧动画来设置stroke属性的动画 . 出于某种原因，这可以防止这种情况发生： $("#logo").css({ "background-color": "yellow", "fill": "red"... -
1 votesanswersviews
动画结束后，Angular 2重新应用[ngStyle]
我有一组图像，我的位置绝对是彼此相邻的 . 要做到这一点，我有每个图像元素： [ngStyle]="{ 'left': ((i % 5)*150) + 'px', 'top': (Math.floor(i / 5)*150) + 'px' }" 我在哪里索引 . 单击其中一个图像时，它将被带到页面的中心 . 为此，我在组件中有以下动画状态： s... -
0 votesanswersviews
Youtube嵌入和CSS动画导致丢帧
我的网站页面存在问题我想将YouTube视频嵌入其中 . 在最初添加嵌入后，我注意到他们以降低的FPS播放 . 起初我怀疑YouTube的视频转换过程是罪魁祸首，但直接在YouTube网站上观看时，相同的视频似乎以完全帧速率播放 . 在Firefox中，嵌入式30 FPS视频将播放约20 FPS，而在Chrome中仅播放约10 FPS，IE似乎不受影响，但它也无法渲染大部分CSS动画（奇怪的是它似... -
5 votesanswersviews
CSS在不同事件中多次转换为相同的元素
我有一组链接标记出现在页面加载与translate3D . 这完全没问题 . 但是我需要链接标签来缩放它的悬停 . 哪个不直接 . 有没有办法用CSS实现它？这是代码： .linkblock { margin: 20% 0; } .hlink { width: 12%; height: 60px; opacity: 0; padding: 0 10px; backgro... -
2 votesanswersviews
webkit-keyframes脉冲背景颜色变化
我正在使用这个很棒的CSS代码通过循环4种颜色的过渡来慢慢自动改变背景颜色 . 我想将它应用于几个单独的Div并让它们都以不同的颜色开始 . 效果将像一个表格，每个单元格在没有用户交互的情况下改变颜色 . 我可以将此效果应用于页面中的任何单个元素，但我想多次使用它并使用不同的起始颜色 . 我试过改变Div的起始颜色，但这似乎不起作用 . 有人知道解决方案吗？ @-webkit-keyframes ... -
1 votesanswersviews
背景图片CSS3无限循环动画
我试图动画一些蒸汽，这是div上的背景图像，无限循环动画 . 除了每5秒跳一次（动画完成后），我几乎没有 . 这是我到目前为止所做的： div#steam { background-image: url('../images/steam.png'); background-repeat: repeat-y; background-position: left bottom; -webkit-ani... -
6 votesanswersviews
在网格图像中使用Spritesheets的CSS动画（不是连续）
我正在尝试为精灵图像设置动画，并找到了这个很好的例子： 博客：http://simurai.com/blog/2012/12/03/step-animation/（已经屈服于linkrot） .Wayback Machine：http://web.archive.org/web/20140208085706/http://simurai.com/blog/2012/12/03/step-anima... -
1 votesanswersviews
可怜的CSS背景动画
所以我今天一直在为一个我正在开发的应用程序开发一个简单的启动页面 我想使用一些css动画来放置一个移动的背景（视差esque），如下所示http://css-tricks.com/parallax-background-css3/ 我通过webkit animate函数在关键帧配置中使用了background-position移动 这是一个样本 #BigWrapper{ -webkit-a... -
0 votesanswersviews
CSS关键帧：如何将div移动到特定位置
我有一个div，当我添加类删除时，我想移动到某个位置（比如说[200,200]） . 我有很多来自不同地方的div，我希望他们在[200,200]见面 . .remove {-webkit-animation：swoopOut 2s 1轻松前锋; } @ -webkit-keyframes swoopOut {0％{position：relative;左：0px;顶部：00px;不透明度：1}8... -
3 votesanswersviews
使用@keyframes动画后转换
我有一个加载指示器（一个使用css3关键帧连续动画其宽度从0％到100％的条形图） . 我通过加载栏添加 .loading 类来触发此行为 . 现在，一旦我完成加载，我想动画出关键帧 . 比方说，例如在我完成加载宽度的时候动画到50％我不会让它跳到100％，但是它应该保持在100％的地方 . 我已经尝试将 transition 和 animation 添加到我的加载栏类，但似乎都没有工作 . 我该... -
0 votesanswersviews
CSS 3浮动文本在关键帧动画的左上角
我已经尝试了很多不同的方法来为这个关键帧动画添加文本，但问题是，当我包含包含文本的div时，它会混淆其中一个动画 . 理想情况下，我希望文本位于中心，顶部或中间和左上角，但是当我得到它时，它会抛出动画中的最后一个 Span . 如何编辑类等待文本以使其不会干扰动画？ Site where I got the css HTML <div class="main-loading&qu... -
1 votesanswersviews
CSS3背景位置百分比根本不起作用
所以我在CSS3编码视差效果，页面 Headers 有3层 . 我的样式表如下： #graphic-layer { /* overall properties for graphic layers */ position: absolute; background-position: center center; background-repeat: no-repeat; ... -
1 votesanswersviews
如何用CSS关键帧显示sprite的部分来创建动画？
我支持在关键帧中更改背景图像 . 所以intead，我已经创建了组合所有12帧的精灵，现在我试图以一定的间隔遍历每一帧来创建动画 . 但我有一个水平精灵，当我尝试在某个关键帧％更改 background-position-x 时，它会滑动 . 精灵：http://i.imgur.com/krQPw.png 示例：http://jsbin.com/amoxef/1（我将动画持续时间设置得更长，看看发... -
0 votesanswersviews
滑出时防止增加窗口宽度 - CSS3动画
我在 div 元素处应用动画 . 动画将元素滑动到视口中并再次将其滑出 . 我的问题是，当元素离开视口时，窗口宽度正在增加 . 你可以通过底部的滚动条看到它 . 我怎样才能防止这种情况发生？我希望窗口保持其大小 . 这是我的HTML： <div class="x1"> <div class="cloud"></div&g... -
1 votesanswersviews
SVG keySplines动画问题/ bug
在keySplines的情况下，似乎存在关于SVG动画的问题 . 我正在使用谷歌浏览器v46.0 svg代码， <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" style=&quo... -
150 votesanswersviews
加载css3过渡动画？
是否可以在不使用Javascript的情况下在页面加载时使用CSS3过渡动画？ This is kind of what I want, but on page load: http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html 到目前为止我发现了什么 CSS3 transition-delay，一种延迟对元素影响的方法 . ... -
2 votesanswersviews
平滑的鼠标移动动画
我有一个菱形div，通过使用CSS动画在悬停时围绕自己的轴旋转360度 . 我不能解决如何确保 smooth going back to the original state 何时不再悬停？ 到目前为止，当钻石处于转弯中间时，它会“跳跃” . 我希望它顺利 . 是否可以使用CSS动画做到这一点？如果没有，也许与JS？ .dn-diamond { display: inline-block; ... -
1 votesanswersviews
具有相同持续时间的Css3动画在由同一事件触发的不同时间结束
我正在尝试使用菜单本身的变换和菜单按钮上的宽度更改来创建一个似乎从左侧滑入的菜单 . 按下按钮时，两个动画都通过javascript触发 . 如果持续时间设置为相同的数字，则按钮移动到菜单之前，两者都在不同的时间结束 . 如果持续时间被调整，那么它们会在同一时间结束时轮流相互超越，即使两者都使用线性定时功能 . 这似乎完全不合逻辑，如何以不同的速度和长度显示相同的持续时间和时间？ 我在我的网站上克... -
11 votesanswersviews
彩虹色文本的循环动画
CYCLING COLORS ON HOVER With JavaScript/jQuery 我正在尝试取一段文本，根据HSL 0deg和360deg之间的计算位置为每个字母着色，然后将颜色悬停在右边的颜色上 . 我知道这很奇怪，但请耐心等待 . What I want is animated rainbow text on hover. 我已经涵盖了让所有这一切都发生一次的逻辑，但不能让悬停... -
10 votesanswersviews
控制CSS立方体旋转（变换）并从3d矩阵中提取值
我制作了CSS立方体，我正在使用上/下和左/右键旋转，但我在旋转方向上遇到了问题 . 尝试＃1 DEMO 使用this article我设法绑定键并将旋转应用于多维数据集 . 我的第一个问题是CSS transform 函数旋转元素轴，所以当，即 . 我按下，Y轴和Z轴改变位置 . 我为这种情况调整了原始代码，但另一个问题是，因为轴是向量，当我按下2次X和Z回到位但矢量被反转（左键开始向右旋转立... -
10 votesanswersviews
我可以使用关键帧动画分别为多个css变换属性设置动画
我想使用这样的关键帧动画分别为两个（或更多）css变换属性设置动画： @keyframes translatex { 100% { transform: translateX(100px); } } @keyframes rotatez { 100% { transform: rotateZ(80deg); } } HTML： &l... -
4 votesanswersviews
CSS3：悬停过渡时的动画精灵
我正在进入CSS3动画和过渡的世界，所以请原谅我的无知 . 这是我正在尝试做的简化版本： 我通过CSS3关键帧无限地拥有一个"pulsates"球 当我将鼠标悬停在球上时，我希望球变得更大并保持这种状态 当我将鼠标移开并保持脉动时，我希望球再次变小（当然，所有过渡都需要平滑） . 这是我使用CSS3动画和过渡的混合（到目前为止在Chrome上测试这个，因此web... -
1 votesanswersviews
CSS3关键帧动画完成后，100％CPU使用率很长 - 如何避免？
我在我正在开发的Web应用程序中尝试一些CSS3关键帧动画 . 我已尝试过我自己的自定义动画和一些由animate.css提供的动画 . 结果是一样的：动画工作正常，但过了一段时间，即使我单独离开浏览器，CPU使用率也会上升到100％左右并保持不变 . 杀死该进程会杀死Web应用程序，删除CSS动画可以解决问题，所以毫无疑问到目前为止我已经看到了这个问题 . -1758245_ Web应用程序的目... -
1 votesanswersviews
在Ionic中实现缓慢变化的背景颜色
我一直试图在Ionic Angular 2中实现一个简单的应用程序，通过整个应用程序，背景颜色可以缓慢变化，在不同颜色之间循环 . 我在CSS关键帧动画方面取得了一些成功： animation: colorChange @keyframes colorChange { 0% { background-color: #001514 ; } 25% { background-color... -
120 votesanswersviews
CSS：动画与转型
所以，我理解如何执行CSS3过渡和动画 . 什么不清楚，我用Google搜索，是什么时候使用哪个 . 例如，如果我想让球反弹，很明显动画是要走的路 . 我可以提供关键帧，浏览器会做中间体帧，我会有一个很好的动画 . 然而，存在可以以任一方式实现所述效果的情况 . 一个简单而常见的例子是实现facebook风格的滑动抽屉菜单： 这种效果可以通过如下过渡来实现： .sf-page { -web...